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>

Answer 2

类col-xs-适用于屏幕宽度<768px。如果div需要垂直堆叠以用于移动视图，请将此类更改为＆＃39; col-xs-12＆＃39; 这将使它们占据100％的宽度并垂直对齐。

Answer 3

你可以像这样使用CSS来改变它。

在全屏幕上说css将是

.div1, .div2, .div3{
          float: left;
          width : 33%;
    }

使用css媒体查询

  @media (max-width: 600px) {
      .div1, .div2, .div3{
          width : 100%;
    }
 }

现在宽度为600px或者更小，div的宽度为100％，它们将垂直显示

在bootsrap中你不需要任何东西，默认包含这个选项你只需要从div中删除col-xs-6类

当浏览器宽度减小时，如何以不同的垂直顺序或流量获得3个水平div？

3 个答案: