Question

在我的Bootstrap 3布局中，在lg / md边界处，我有4列作为sush：

column 1  column 2   column 3   column 4
------    --------   --------  ---------
0          1          4         8
           2          5         9
           3          6         
                      7

（每列的高度不固定，取决于页面）

在xs / sm边界，我需要它改为：

col 1          col2
-------        --------
0              4
1              5
2              6
3              7
               8
               9

有什么建议吗？我尝试拉动和推动，但没有成功。我坚持这个结果

col 1          
-------        
0              
1              
2              
3              col2
               -------
               4
               5
               6
               7
               8
               9

<!-- Col 1 -->
   <div class="col-md-3 col-md-pull-0 col-sm-6">
        0
    </div>

    <!-- Col 2 -->
    <div class="col-md-3 col-md-pull-0 col-sm-6 col-sm-pull-6">
        1<br/>2<br/>3
    </div>

    <!-- Col 3 -->
    <div class="col-md-3 col-md-pull-0 col-sm-6">
        4<br/>5<br/>6<br/>7
    </div>

    <!-- Col 4 -->
    <div class="col-md-3 col-md-push-0 col-sm-6 col-sm-push-6">
        8<br/>9
    </div>

Answer 1

您应该可以通过嵌套行来完成此操作。 BS文档示例：

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

要使用默认网格嵌套内容，请在现有.col-sm- *列中添加新的.row和.col-sm- *列。嵌套行应包含一组最多可添加12个或更少的列（不要求您使用所有12个可用列）。 http://getbootstrap.com/css/#grid-nesting

这假设您不关心是否有两个列div叠加在一起以实现此目的。

Answer 2

是的！ Netsting行是个好主意:)我用这种方式解决了我的问题：

  <div class="row">
    <div class="col-xs-6">
      <div class="row">
        <div class="col-md-6 col-xs-12">
          0
        </div>
        <div class="col-md-6 col-xs-12">
         1 <br/> 2 <br/> 3
        </div>
      </div>
    </div>

    <div class="col-xs-6">
      <div class="row">
        <div class="col-md-6 col-xs-12">
         4 <br/> 5 <br/> 6 <br/> 7
        </div>
        <div class="col-md-6 col-xs-12">
          8 <br/> 9
        </div>
      </div>
    </div>
  </div>

非常感谢benhass :)（当然还有评论中的人）

Bootstrap 3：在lg / md中创建一个4列网格，在xs / sm中创建一个2列网格，具有spectif顺序

2 个答案: