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

Question

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

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

桌面中也应该像图中一样呈现。

我可以尝试使用DIV将Aside部分放置在此div中，然后a

      float: right;

将它移动到右边，但我觉得这是一个错误的方法，因为在前面的例子中，我看到人们使用浮动：左，但在右侧得到相同的结果。

那么这是我最好的方式呢？

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

小提琴演示