html - Bootstrap 3 : Push/pull columns over rows

Question

我在手机上有这样的布局:

 --------- 
|    1    |  
 --------- 
|    2    |  
 --------- 
|    3    |  
 --------- 

对于更大的屏幕，我想这样:

 -----------------------------------
|        1               |     3    |
 -----------------------------------
|                 2                 |
 -----------------------------------

代码，不起作用，因为拉/推一行:-(

<div class="row clearfix">
    <div class="col-sm-9 alert alert-info">
        1
    </div>
    <div class="col-sm-3  col-sm-push-3 alert alert-warning">
         2
    </div>
    <div class="col-sm-3 col-sm-pull-3 alert alert-debug">
         3
    </div>
</div>  

http://jsfiddle.net/QtPd2/27/

Answer 1

由于通过设置 left 或 right 属性进行推拉，因此它永远不会像您指出的那样换行到另一行。

一种解决方案是复制第 2 列或第 3 列的内容(选择内容或交互性最少的列)。隐藏一个 xs，另一个在 sm、md 和 lg 上。

在下面的示例中，我复制了第 2 列。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-9 alert alert-info">
      1
    </div>
    <div class="col-xs-12 alert alert-warning hidden-sm hidden-md hidden-lg">
      2
    </div>
    <div class="col-xs-12 col-sm-3 alert alert-danger">
      3
    </div>
    <div class="col-sm-3 alert alert-warning hidden-xs">
      2
    </div>
  </div>
</div>

P.S. 无需在 .row 上添加 .clearfix，因为它已经包含了它。即使您希望在最小布局上的列宽为 12，请始终添加 .col-xs-12 类，因为它会添加用于否定负 的 padding .row 上的 >margin。