html - 为什么我的 Bootstrap 推拉 div 不起作用？

Question

对于 col-md 和更高级别，我希望有 2 个 div besides，同时对于 ，它们above col-sm 及更低。所以我尝试使用文档中提到的推拉功能，但不知何故它不起作用。我想要做的是让 RIGHT div above 在 col-sm 和更低的 LEFT div 上，基本上颠倒顺序。

我做错了什么？

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-sm-push-12 col-md-7">LEFT</div>
    <div class="col-sm-12 col-sm-pull-12 col-md-5">RIGHT</div>
  </div>
</div>

这是一个 fiddle :https://jsfiddle.net/ko7euh77/1/

Answer 1

你只需要考虑“mobile-first”..

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-push-7 col-md-5">RIGHT</div>
    <div class="col-sm-12 col-md-pull-5 col-md-7">LEFT</div>
  </div>
</div>

演示:http://www.codeply.com/go/2SN4r7KGwV

---

Bootstrap 4 更新

在 Bootstrap 4 中，推拉类现在是 order-*(使用 flexbox)。

https://www.codeply.com/go/l3BOOH6JM9

<div class="row">
    <div class="col-md-5 order-md-2">
        <div class="card card-body">RIGHT</div>
    </div>
    <div class="col-md-7 order-md-1">
        <div class="card card-body">LEFT</div>
    </div>
</div>