html - 当浏览器宽度减小时，如何让 3 个水平 div 以不同的垂直顺序堆叠或流动？

Question

我的页脚中有 3 个水平行的 div。我正在使用引导网格。

<div class="col-xs-6 col-sm-4 div1">
<div class="col-xs-6 col-sm-4 div2">
<div class="col-xs-6 col-sm-4 div3">

让他们按这个顺序出现

+------+------+------+
| div1 | div2 | div3 |
+------+------+------+

当浏览器宽度减小到某个宽度假设 600px 时，我希望 3 个 div 按以下顺序垂直堆叠在一个列中。

+------+
| div1 |
+------+
| div3 |
+------+
| div2 |
+------+

如何使用 CSS 实现这一点？

Answer 1

您可以使用推拉方法。同时删除 col-xs-6 类以在移动 View 上实现单列布局。

<div class="container">
   <div class="col-sm-4">div1</div>
   <div class="col-sm-4 col-sm-push-4">div3</div>
   <div class="col-sm-4 col-sm-pull-4">div2</div>
</div>