Bootstrap自定義堆棧

Question

我有一個關於黑客Bootstrap默認堆棧的快速問題。我提供了一個codepen因爲這是一個有點難以解釋：http://codepen.io/Hudson_Taylor11/pen/LbVMoZ

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6 green"></div> 
    <div class="col-md-6 red"></div> 
    </div> 
    <div class="row"> 
    <div class="col-md-6 red"></div> 
    <div class="col-md-6 green"></div> 
    </div> 
</div> 

從本質上講，我想綠色的div在中等屏幕寬度斷點堆棧上紅色的（即綠，紅，綠，紅色）。但是，默認情況下，Bootstrap將「三明治」紅色的div放在綠色的div之間。請注意，我也希望在較大的屏幕寬度下保留棋盤圖案。謝謝！

Answer 1

您可以使用Bootstrap的pushpull類更改大屏幕上的列順序。然後，他們會根據需要在較小的屏幕上堆疊。

<div class="container"> 
    <div class="row"> 
    <div class="col-md-6 green"></div> 
    <div class="col-md-6 red"></div> 
    </div> 
    <div class="row"> 
    <div class="col-md-6 col-md-push-6 green"></div> 
    <div class="col-md-6 col-md-pull-6 red"></div> 
    </div> 
</div> 

演示：http://codeply.com/go/U82iBec71M