如何正确放置<aside>标签？</aside>

Question

所以这是我的问题。我的网站运行响应式设计，到目前为止一切正常。但主要问题是我应该拥有的ASIDE内容。以下是我的网站按字面划分的完美示例：

我的问题是，我如何才能正确地将该部分置于此图中，因此它也可以在整个内容（文章/部分）的底部呈现响应性，因此当它在iPhone上呈现时，旁边就是正确的主要内容的底部约有2％的差距将两者分开？

同样在桌面中应该像图中那样呈现。

我可以尝试使用DIV将Aside部分放在一边，然后在此div中嵌套，然后

      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%;}
}

Fiddle Demo