Bootstrap v3，全寬列的反向堆棧順序

Question

是否可以在Bootstrap v3中顛倒全寬列的順序？例如...

-xs（A和B都是COL-XS-12）

[A]

[B]

-sm（A和B都是山口-sm-12）

[B]

[A]

我知道我可以使用隱藏/顯示techniq但是我想避免重複的內容，因爲A和B都有很多動態生成的內容，並且複製該內容會使頁面減慢很多。謝謝。

Answer 1

使用Bootstraps .col-md-push-*和.col-md-pull-*類。

更多關於這一點，在這裏：http://getbootstrap.com/css/#grid-column-ordering

例子：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> 
     <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> 
    </div> 
</div> 

CODEPEN DEMO

對於全寬列例如使用推/拉輔助類請看這個JS斌：

<div class="row"> 
    <div class="col-xs-12 col-sm-6 col-sm-push-6"> 
    <p>test2</p> 
    </div> 

    <div class="col-xs-12 col-sm-6 col-sm-pull-6"> 
    <p>test1</p> 
    </div> 
</div> 

http://jsbin.com/gazipa/2/edit?html,css,output

您還可以使用CSS變換來改變它的訂貨在視口中斷點：

@media (max-width: 767px) { 
    .row.reorder-xs { 
    /*bring your own prefixes*/ 
    transform: rotate(180deg); 
    direction: rtl; /* Fix the horizontal alignment */ 
    } 

    .row.reorder-xs > [class*="col-"] { 
    /*bring your own prefixes*/ 
    transform: rotate(-180deg); 
    direction: ltr; /* Fix the horizontal alignment */ 
    } 
} 

http://jsbin.com/gazipa/3/edit?html,css,output