为什么我的Bootstrap push&pull div不起作用？

Question

我希望besides彼此有两个div col-md and higher,同时让他们above互相拥抱col-sm and lower.所以我尝试使用文档中提到的推拉功能,但不知怎的,它不起作用.我想要做的是让RIGHT abovediv在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>

这是一个小提琴:https://jsfiddle.net/ko7euh77/1/

Answer 1

你只需要思考" 移动优先 "..

<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更新

push pull类现在order-*(使用flexbox)在Bootstrap 4中.

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>