How to set the <aside> tag?

Question

So here is my problem. My site works on responsive design, everything still works fine. But the main problem is what ASIDE content should have. Here is a great example of how my site is literally divided:

My question is, how can I correctly position this section aside, like in this diagram, so that it can also respond, but at the bottom of the entire content (article / section), so when it is displayed on the iPhone, the bottom of the main content with a margin of about 2% separating the two?

Also on the desktop should be displayed as on a diagram.

I can try to position the Aside section using a DIV by nesting it in this div, and then

      float: right;

, , , , float: left .

, ?

Answer 1

css :

@media screen and (max-width: 767px) { // devices recognized as phones - under 768px
 article{width: 100%;}
 aside{width:100%}
}

Answer 2

.

HTML

<div id="wrapper">
<header id="header"> header </header>
<nav id="nav"> navigation </nav>
<article id="article"> article </article>
<aside id="aside"> aside </aside>
<footer id="footer"> footer </footer>
</div>

CSS

body { margin:0; padding:0;}
#wrapper { width:700px; max-width:100%; margin:0 auto;}
#article, #aside, #header, #nav, #footer { background:grey; margin-bottom:10px; text-align:center; padding:20px 0;  color:#fff;}
#article, #aside{float:left;}
#article { width:72.91666666666667%; margin-right:1.041666666666667%;}
#aside { width:26.04166666666667%;}
#footer { clear:left;}

@media only screen and (max-width:600px){
    #article, #aside{float:none; width:100%;}
}