HTML - 更改文档流中元素的顺序

Question

对于桌面大小的响应式设计，我希望有一个向右浮动的旁边，与标题在相同的垂直位置，但位于我的第一段移动设备下方；像这样的东西:

桌面

*Header*       | --aside--  |
<P>1, Lorum    | Also Lorum |
Ipsum Dolar</p>| Ipsum, etc.|
<P>2, Sit amet,|____________|
blah, blah, blah, blah.</p>   

移动

*Header*
<P>1, Lorum
Ipsum Dolar.</p>
| --aside--  |
| Also Lorum |
| Ipsum, etc.|
|____________|
<P>2, Sit amet,
blah, blah,
blah, blah.</p>

目前，我在多栏布局(foundation 5)中将我的 aside 作为一列，这适用于移动布局，但在桌面上我的第二段位于 aside 下面的一行, 因此第 1 段和第 2 段之间有很多空格。

我想要的是让我的文档在桌面上显示，就好像它是:

<aside style="float:right;">blah blah.</aside>
<h2>blah</h2>
<p>blah, blah.</p>
<p>blah, blah.</p>
<p>blah, blah.</p>

并在移动设备上显示为:

<h2>blah</h2>
<p>blah, blah.</p>
<aside>blah blah.</aside>
<p>blah, blah.</p>
<p>blah, blah.</p>

我有哪些选择？

谢谢。

编辑:澄清一下，我正在使用媒体查询。问题是关于使用什么 css 规则来实现具有相同 HTML 的 2 种不同布局。

Answer 1

这可以通过媒体查询和不同的显示属性实现。这些属性是:table-footer-group、table-row-group 和 table-header-group (w3schools display)。这些属性是 html 中 tfoot、tbody 和 thead 的 css 等价物。使用这些属性，您可以更改某些元素的显示顺序。检查jsfiddle检查它是如何工作的。

这是它的样子:

<div id="container">
    <div id="aside">
        <aside style="float:right;">This is outside</aside>
    </div>
    <div id="content">
        <h2>blah</h2>
        <p>blah, blah.</p>
    </div>
    <div id="contentlast">
        <p>blah, blah.</p>
        <p>blah, blah.</p>
    </div>
</div>

还有CSS:

@media screen and (max-width:500px){
    #aside {
        display:table-row-group;
    }
    #content {
         display:table-header-group;   
    }
    #contentlast {
         display:table-footer-group;   
    }
}

显示表格行组让 div#aside 表现为 tbody。 div#content 现在表现为 thead，div#contentlast 表现为 tfoot。