爲什麼我的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不起作用？

回答

相關問題