2016-05-17 127 views
0

我有一個Bootstrap佈局,我想創建,但我無法弄清楚我將如何完成它。基本上,在桌面尺寸上,佈局將按順序依次排列爲4列,6列和2列,然後移動,我希望4列和2列依次排列其他和6列下降。如何實現Bootstrap佈局?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-8 col-sm-4"> 
 
     A 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     B 
 
    </div> 
 
    <div class="col-xs-4 col-sm-2"> 
 
     C 
 
    </div> 
 
    <div class="clearfix"></div> 
 
    </div> 
 
</div>

所以在移動我想 「A」 和 「C」 是內聯和 「B」 爲低於 「A」 一個完整的12列和 「C」

回答

2

您可以定期引導推做到這一點,拉,不需要靠絕對定位。見引導文檔瀏覽:http://getbootstrap.com/css/#grid-column-ordering

輕鬆改變我們內置的網格列的順序與.COL-MD-推*和.COL-MD-上拉*修飾符的類。

+3

沒錯,這裏有一個例子:[的jsfiddle(https://jsfiddle.net/znwsk6fw/1/) –

+0

謝謝你的建議,並感謝您的例子@azeós,這完美地工作。 – user13286

0

你可以嘗試這樣的事情: - 只要這個容器是相對的,它應該沒問題。

https://jsfiddle.net/znwsk6fw/

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-8 col-sm-4"> 
     A 
    </div> 
    <div class="col-sm-6 col-md-6 col-xs-12 "> 
     B 
    </div> 
    <div class="col-xs-4 col-sm-2 col-md-2 column_c"> 
     C 
    </div> 
    <div class="clearfix"></div> 
    </div> 
</div> 

@media screen and (max-width:768px) { 
    .column_c { 
    position:absolute; 
    right:0; 
    } 
}