在引导程序中组合列以用于较小的设备

Question

我在一个 div 中有 3 个 div 水平对齐。

| 1 | 2 | 3 |

在较小的设备中，我希望 3 移至 1 以下，如下所示：

| 1 | 2 |

| 3 | 2 |

也许我可以创建不同的布局，但是在引导程序中使用网格有什么办法吗？

编辑

这是我想要实现的目标的演示。在桌面上，我希望它看起来像这样：

在移动端：

Answer 1

Demo

HTML：

<div class="col-xs-4 col-sm-4" style="height:100px;background:red;">A</div>
<div class="col-xs-8 col-sm-4 float" style="height:100px;background:blue">B</div>
<div class="col-xs-4 col-sm-4" style="height:100px;background:green">C</div>

CSS：

@media (max-width: 768px) 
  { 
    .float
    {
      float:right!important;
      height:200px!important;
    } 
  }

Answer 2

我假设您希望第三个框直接位于第一个框的下方，而第二个框高于第一个框。这只能在 Bootstrap 中通过复制第三个框的内容并根据网格大小隐藏/显示它来实现（例如sm）。推或拉柱子，例如使用col-sm-push-4，无济于事，因为他们永远不会将列换行到下一行。

由于 Bootstrap 是一个移动优先的框架，第一步是创建小布局。为了得到第一个盒子正下方的第三个盒子，我们需要使用column nesting。这个想法是将第一个和第三个盒子放在外部网格左列内的内部网格中，而第二个盒子将放在外部网格的右列中。请注意，内部网格需要.row 来抵消其父级col-xs-6 的填充，并且内部网格内的列数最多为12。有些人认为它需要最多计数6，因为它们存在于@ 中987654328@，但事实并非如此。

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12">
          <div class="box box--one">One</div>
        </div>
        <div class="col-xs-12">
          <div class="box box--three">Three</div>
        </div>
      </div>
    </div>
    <div class="col-xs-6">
      <div class="box box--two">Two</div>
    </div>
  </div>
</div>

小布局现在看起来不错。要获得其他布局（我假设 md 作为其断点）将 col-xs-6 更改为 col-xs-6 col-md-4 并在包含第 3 个框的外部网格中添加第 3 列。

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-4">
      ...
    </div>
    <div class="col-xs-6">
      ...
    </div>
    <div class="col-md-4">
      <div class="box box--three">Three</div>
    </div>
  </div>
</div>

现在看起来完全损坏了，第三个框显示了两次，其中一个与小于md 的屏幕上的第一个和第二个框重叠。我们可以通过hiding the columns 解决这个问题，其中包含特定网格大小的第三个框。要将第三个框隐藏在内部网格内以获得更大的屏幕，请将 <div class="col-sm-12"> 更改为 <div class="col-sm-12 hidden-md hidden-lg">。并隐藏第三个外列以用于较小的屏幕将<div class="col-md-4"> 更改为<div class="col-md-4 hidden-xs hidden-sm">

查看下面的完整示例代码：

.box {
  border: 1px solid #c66;
  background-color: #f99;
  padding: 15px;
  color: #fff;
  font-family: Helvetica, Arial;
  font-size: 24px;
}
.box--one,
.box--three {
  height: 100px;
}
.box--two {
  height: 200px;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-4">
      <div class="row">
        <div class="col-xs-12">
          <div class="box box--one">One</div>
        </div>
        <div class="col-xs-12 hidden-md hidden-lg">
          <div class="box box--three">Three</div>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-md-4">
      <div class="box box--two">Two</div>
    </div>
    <div class="col-md-4 hidden-xs hidden-sm">
      <div class="box box--three">Three</div>
    </div>
  </div>
</div>

PS如果您不喜欢复制第 3 个框，因为里面可能有很多内容，您也可以在发生断点更改时使用 JavaScript 将框移动到正确的列中。我已经制作了一些 jQuery 插件原型，应该能够做到这一点，请参阅 https://github.com/ckuijjer/jquery-breakpointspy

PS我刚刚看到您更新的问题：如果框具有固定高度，只需将一个类添加到具有固定高度的大型布局的第三个框。如果它们没有固定高度，请创建一些将高度设置为相等的 JavaScript 并将其附加到调整大小事件。一个完全不同的解决方案是研究 flexbox。

Answer 3

是的，您可以通过 col-sm-push 和 col-sm-pull 类似的帖子进行操作；

Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3

还可以查看详细的帖子here。