当浏览器宽度减小时,如何以不同的垂直顺序或流量获得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该类以在移动视图上实现单列布局.

<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>