为较小的设备合并 bootstrap 中的列

Question

我有 3 个 div 里面一个 div 水平对齐。

| 1 | 2 | 3 |

在较小的设备中，我希望 3 移动到 1 以下，看起来像这样：

| 1 | 2 |

| 3 | 2 |

我也许可以创建不同的布局，但是在 bootstrap 中有没有办法使用网格？

编辑

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

在手机中：

Answer 1

是的，您可以通过 col-sm-push 和 col-sm-pull 类似 post;

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

还要检查更多细节post here.

Answer 2

我假设您希望第 3 个框位于第 1 个框的正下方，而第 2 个框高于第 1 个框。这只能在 Bootstrap 中通过复制第三个框的内容和 hiding/showing 根据网格大小（例如 sm）来实现。推或拉列，使用例如col-sm-push-4，不会有帮助，因为他们永远不会让列换行到下一行。

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

<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 并将第三列添加到包含第三个框的外部网格。

<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如果你不喜欢复制第三个框，可能里面的内容很多，你也可以用JavaScript发生断点更改时，将框移动到适当的列中。我制作了一些 jQuery 插件原型应该可以做到这一点，请参阅 https://github.com/ckuijjer/jquery-breakpointspy

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

Answer 3

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

为较小的设备合并 bootstrap 中的列

Combining columns in bootstrap for smaller devices

html

css

twitter-bootstrap

twitter-bootstrap-3

Demo