Bootstrap 3网格布局 - 移动块

时间:2014-04-24 15:07:00

标签: twitter-bootstrap grid

我正在为网格问题寻找解决方案(希望是纯粹的Bootstrap,没有任何自定义CSS)。

我想从移动布局更改为桌面布局,如图所示。

example

我目前看到的代码

<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消失。

2 个答案:

答案 0 :(得分:0)

创建两行

  1. 第一行应该有一个div,其中class =“col-xs-12”代表A
  2. secund行每个div应该有两个div,对于B和C,class =“col-xs-6”。
  3. http://getbootstrap.com/css/#grid-example-mixed

答案 1 :(得分:0)

找到了一种方法。

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