为 Bootstrap 网格设置断点

Question

我在我的 react.js 项目中使用 bootstrap 网格系统 (3.4.1)。我有两列 C1 和 C2。

| C1 | C2 |

如果我缩小屏幕宽度，默认情况下 C2 会在 C1 下中断。但我希望对面的 C1 应该在 C2 下突破。仅使用 bootstrap 是否有可能实现这一目标？

Answer 1

在Bootstrap 3.

中使用这个

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6" style="float:right">
      C2
    </div>
    <div class="col-sm-12 col-md-6" style="float:right">
      C1
    </div>
  </div>
</div>

Answer 2

在Bootstrap3中你可以做如下操作，

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 col-sm-push-8 bg-info">C2</div>
    <div class="col-sm-8 col-sm-pull-4 bg-success">C1</div>
  </div>
</div>

同一个 https://codepen.io/R1112/pen/RwbzmEL

的工作代码笔

为 Bootstrap 网格设置断点

Set breakpoint for Bootstrap grid

css

twitter-bootstrap

twitter-bootstrap-3

| C1 | C2 |