Bootstrap推拉在兩個網格上

Question

我正在使用引導程序來制作響應式網站。 我必須在左欄上的第一列是<div class="col-md-4 column"> ，而在<div class="col-md-4 column">上的是<div class="col-md-8 column"> 。

當我在sm或xs上看到它時，每個網格都變為12列，這很好。

我希望先顯示“右”列，然后再顯示“左”列。

這是我所擁有的，不起作用。

<div class="col-md-4 column col-sm-push-12 col-xs-push-12">
<div class="col-md-8 column col-sm-pull-12 col-xs-pull-12">

Answer 1

在這里看看： http : //www.bootply.com/qlstG12Aea

<div class="container">
    <div class="row">
        <div id="r-column" class="col-xs-12 col-sm-12 col-md-push-4 col-md-8">right</div>
        <div id="main" class="col-xs-12 col-sm-12 col-md-pull-8 col-md-4">main</div>
    </div>
</div>

用另一種方式做。 聲明移動第一， xs和sm全寬和md -裝置推一個拉它的正確順序。

Answer 2

訣竅是更改html中列的順序：

<div class="row">
    <div class="col-md-4 col-md-push-8">column 2</div>
    <div class="col-md-8 col-md-pull-4">column 1</div>
</div>

因此，您實際上將在LG和MD中更改順序，而SM和XS將顯示html代碼的真實順序。

工作示例： http : //jsfiddle.net/cj4vqxv5/