Bootstrap 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

创建两行

1. 第一行应该有一个div，其中class =“col-xs-12”代表A
2. secund行每个div应该有两个div，对于B和C，class =“col-xs-6”。

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

Answer 2

找到了一种方法。

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