引導3網格佈局 - 移動塊

Question

我正在尋找一個解決方案（希望純Bootstrap，沒有任何自定義CSS）的網格問題。

我想從移動版式更改爲桌面佈局，如圖中所示。

我的代碼目前看起來像這樣

<div class="row"> 
    <div class="col-xs-4"> 
     Content A 
    </div> 
    <div class="col-xs-8"> 
     <div>Content B</div> 
     <div>Content C</div> 
    </div> 
</div> 

我不知道我怎樣才能將B是在頂部和旁邊彼此的A/C。我已經嘗試了各種不同的推/拉和col-md- *想法，但他們最終要麼打破移動佈局，要麼導致A/B消失。

Answer 1

找到一種方法來做到這一點。

<div class="row"> 
    <div class="col-xs-8 col-sm-12 col-xs-push-4 col-sm-push-0"> 
     Content B 
    </div> 
    <div class="col-sm-6 col-xs-4 col-xs-pull-8 col-sm-pull-0"> 
     Content A 
    </div> 
    <div class="col-sm-6 col-xs-8 col-xs-push-4 col-sm-push-0"> 
     Content C 
    </div> 
</div> 

Answer 2

創建兩行

1. 第一行應該有帶class = 「COL-XS-12」 一個div對於A
2. secund行應該有兩個div每格帶class =「COL-XS- 6" 用於B和C.

http://getbootstrap.com/css/#grid-example-mixed