How Do I Correctly Place An Tag?

So here is my problem. My site runs on responsive design, Everything till now is working fine. But the main problem is the ASIDE content i should have. Here is a perfect example of

Solution 1:

css for small devices:

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

Solution 2:

Here is the solution.

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:20px0;  color:#fff;}
#article, #aside{float:left;}
#article { width:72.91666666666667%; margin-right:1.041666666666667%;}
#aside { width:26.04166666666667%;}
#footer { clear:left;}

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

Fiddle Demo