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

Question

为了清晰显示，我已经绘制了三个不同的图像，显​​示我在桌面，移动视图中的div状态以及我想要在移动视图中获得的内容。

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

HTML

db.collection.aggregate({$unwind:"$level1"},{$match:{"title" :"Sales","level1.name":"Master"}},{$group:{_id:"_id","title":{$first:"$title"},"level1":{$push:"$level1"}}})

2。移动设备的媒体查询后我得到的结果使两个div全宽。

第3。这就是我想要的

我想出的解决方案是将div更改为html，并使用如下所示的浮动属性。

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

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

问题：因为我制作两个全宽的div（在移动设备中使用媒体查询）然后，最近的文章 div首先出现，然后文章列表但是我怎么能首先获取文章列表，然后最近的帖子？

Answer 1

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

对于旧版浏览器，根据this answer，您可以使用表格布局对div进行重新排序：

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

对于较新的浏览器，您可以使用FlexBox指定订单

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