如何在移动视图CSS中相互交换div

Question

为了清晰可见，我绘制了三张不同的图像，显​​示桌面、移动视图中的 div 状态以及我试图在移动视图中获取的内容。

1. 这是桌面视图中 div 的当前状态。

超文本标记语言

<div id="wrapper">
    <div id="left-nav">recent posts</div>
    <div id="main">articles listing</div>
</div>

2.移动设备媒体查询使两个div全宽后我得到什么。

3.这就是我想要得到的

我想出的解决方案是将 div 放置在具有浮动属性的 html 中改变位置，如下所示。

<div id="wrapper">
    <div id="main" style="float:right;">articles listing</div>
    <div id="left-nav" style="float:left;">recent posts</div>
</div>

这在清除浮动后在移动视图上有效。但这是在一些 CMS 中，所以如果可能的话，我希望用 css 来获取它。

问题：当我将两个 div 设为全宽（在具有媒体查询的移动设备中）时，最近的文章div 首先出现，然后是文章列表，但如何才能先获取文章列表，然后再获取最近的帖子？

Answer 1

您有一些选择取决于您的客户想要使用什么浏览器：

对于较旧的浏览器，根据此答案，您可以使用表格布局来重新排序您的 div：

#wrapper   { display: table; }
#firstDiv  { display: table-footer-group; }
#secondDiv { display: table-header-group; }

对于较新的浏览器，您可以使用FlexBox来指定顺序

#wrapper   { display: flex; }
#firstDiv  { order: 1; }
#secondDiv { order: 2; }