引导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