html - Bootstrap 自定义堆叠

Question

我有一个关于破解 Bootstrap 默认堆叠的快速问题。我提供了一个代码笔，因为这有点难以解释:http://codepen.io/Hudson_Taylor11/pen/LbVMoZ

<div class="container">
  <div class="row">
    <div class="col-md-6 green"></div>
    <div class="col-md-6 red"></div>
  </div>
  <div class="row">
    <div class="col-md-6 red"></div>
    <div class="col-md-6 green"></div>
  </div>
</div>

本质上，我希望绿色 div 在中等屏幕宽度断点(即绿色、红色、绿色、红色)处堆叠到红色 div 之上。但是，默认情况下，Bootstrap 将红色 div“夹在”绿色 div 之间。请注意，我还想在更大的屏幕宽度上保留棋盘格图案。谢谢!

Answer 1

您可以使用 Bootstrap 的 push pull 类来更改大屏幕上的列顺序。然后它们会在较小的屏幕上按需要堆叠。

<div class="container">
  <div class="row">
    <div class="col-md-6 green"></div>
    <div class="col-md-6 red"></div>
  </div>
  <div class="row">
    <div class="col-md-6 col-md-push-6 green"></div>
    <div class="col-md-6 col-md-pull-6 red"></div>
  </div>
</div>

演示:http://codeply.com/go/U82iBec71M