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

Question

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

我的问题是，我怎样才能像这个图中那样正确定位旁边的部分，这样它也可以在整个内容(文章/部分)的底部呈现响应式，但是当它在 iPhone 上呈现时，旁边就在主要内容的底部，将两者分开约 2% 的边距？

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

我可以通过将 aside 嵌套在这个 div 中然后使用一个 DIV 来尝试定位 Aside 部分

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