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

我想为col-md and higher互相提供2个div besides，同时让他们above彼此为col-sm and lower。所以我试图使用文档中提到的推拉功能，但不知何故它不起作用。我想要做的是获得右上divcol-sm和更低的LEFT div，基本上颠倒了顺序。为什么我的Bootstrap推拉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/

来源

2016-09-18 user1996496

'.COL-SM-推12'和'.COL-SM-拉12 '不起作用。把你的div放在你想让它们出现在较小的屏幕上，然后拉和推它们。你可以找到一个解决方案[这里]（http://stackoverflow.com/questions/26466407/twitter-bootstrap-column-re-ordering-for-full-width-divs/26466793#26466793） – tmg

你只需要考虑 “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

引导4更新

推挽类现在order-*在自举（使用Flexbox的）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>

来源

2016-09-18 16:12:49 ZimSystem

有道理！谢谢:) – user1996496

@ZimSystem可以请你解释一下代码，这样别人就可以知道他们做错了什么。 – usama

我已经按照你的方法，但仍然我的代码里面的按钮不起作用。 – usama

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

回答

相关问题