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

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

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

HTML

最近的职位
物品清单

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

3。这就是我想要得到的

我提出的解决方案是使用如下所示的浮动属性在html中放置div并改变其位置

<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首先出现，然后出现文章列表，但是如何才能先获得文章列表，然后在最近发表的文章？

您有一些选项取决于您的客户希望使用的浏览器：

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

#包装器{display:table；}
#firstDiv{display:表尾组；}
#secondDiv{display:表头组；}

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

#包装器{display:flex；}
#firstDiv{顺序：1；}
#secondDiv{顺序：2；}

@suvroc这是一个奇怪的评论，它只是关于一个div与其他div的位置交换，好吧，

id=“wrapper”=>class=“row”

，

id=“left nav”=>class=“col-md-4”

和

id=“main”=>class=“col-md-8”

现在回答我你怎么处理这个问题？使用bootstrap，如果您甚至为mobilegrid分配了任务，div也会保持原样。如何将下方的div与上方的div互换。是的，当然，它不会直接回答您的问题（因此它不是一个答案），但这只是我的建议。这个系统在不同的浏览器之间是灵活和有用的，我在问题中提到过，我正在一些

CMS

平台上工作，所以将所有这些转换成引导需要时间。我以前使用过bootstrap，从我上面的评论中你可能已经知道了。谢谢@suvroc还更新了更多彩色图片的问题，请检查一下。您使用什么浏览器？或者，当“#firstDiv”和

#secondDiv

浮动时，您希望使用

display:table

策略为哪个浏览器编写它。必须删除浮动（

float:none

）才能工作

表尾组/表头组

。

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