Bootstrap 自定义堆叠答案

【问题标题】：Bootstrap Custom StackingBootstrap 自定义堆叠
【发布时间】：2016-11-09 00:24:20
【问题描述】：

我有一个关于破解 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 会将红色 div 夹在绿色 div 之间。请注意，我还想在更大的屏幕宽度上保留棋盘格图案。谢谢！

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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

【讨论】：