Bootstrap 3列在断点后排序

Question

<div class="row">
  <div class="red col-lg-4"></div>
  <div class="green col-lg-4"></div>
  <div class="blue col-lg-4"></div>
</div>

可以像这样在断点之后创建列命令吗？

Answer 1

您需要重新排序div，以便首先使用较小的版本设置布局，然后使用pull和push CSS类来移动。这可行：

<div class="row">
   <div class="red col-lg-4 col-md-6">r</div>
   <div class="blue col-lg-4 col-lg-push-4 col-md-6">b</div>
   <div class="green col-lg-4 col-lg-pull-4 col-md-12">g</div>
</div>

<强> bootply example

根据您想要的偏低程度，您可以将上述内容扩展为：

<div class="row">
   <div class="red col-lg-4 col-md-6 col-sm-6 col-xs-6">r</div>
   <div class="blue col-lg-4 col-lg-push-4 col-md-6 col-sm-6 col-xs-6">b</div>
   <div class="green col-lg-4 col-lg-pull-4 col-md-12 col-sm-12 col-xs-12">g</div>
</div>

在最小的屏幕上获得相同的布局。

Answer 2

试试这个你需要知道你的断点

<div class="row">
  <div class="red col-sm-6 col-lg-4">AAAAAAAAAAAAAAAAAAAAAAA</div>
  <div class="green col-sm-6 col-lg-4">AAAAAAAAAAAAAAA</div>
  <div class="blue col-sm-12 col-lg-4">AAAAAAAAAAAA</div>
</div>

此代码将破坏＆＃39;在750px宽度的容器。 小提琴链接：http://jsfiddle.net/7cP2Y/