Question

我有一个关于黑客Bootstrap默认堆叠的快速问题。我提供了一个codepen，因为这有点难以解释：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会将绿色之间的红色“三明治”。请注意，我还希望在更大的屏幕宽度下保留棋盘图案。谢谢！

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

Bootstrap自定义堆叠

1 个答案: