Question

我希望besides彼此拥有2个div col-md and higher，而above彼此拥有col-sm and lower。所以我尝试使用文档中提到的推拉功能，但不知怎的，它不起作用。我想要做的就是在col-sm上得到RIGHT div above 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

你只需要思考＆＃34; mobile-first＆＃34; ..

<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 push类现在是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>

Answer 2

这完全取决于您使用的版本，对于Bootstrap 4及更高版本，您可以像这样推拉：这里的另一件事并不意味着对屏幕的争执不会是。

<div class="row">
    <div class="col-sm-2 order-md-2 order-sm-1"  >
       <div >RIGHT</div>
   </div>
   <div class="col-sm-10 order-md-1 order-sm-2 ">
      <div >LEFT</div>
   </div>
</div>

Here are the bootstrap docs for further reading

为什么我的Bootstrap push＆amp;拉div不工作？

2 个答案: