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。无需在.clearfix上添加.row，因为它已经包含了.col-xs-12。即使您希望列在最小的布局上为12宽，也要添加padding类，因为它添加margin用于否定.row上的否定{{1}}。

Answer 2

试试这个..

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="row clearfix">
    	<div class="col-sm-9 col-md-3 alert alert-info">
    		1
    	</div>
    	<div class="col-sm-3  col-md-3 col-md-push-3 alert alert-warning">
    		 2
    	</div>
    	<div class="col-sm-3  col-md-3 col-md-pull-3 alert alert-debug">
    		 3
    	</div>
    </div>

Answer 3

2017年更新

对于某些人来说，这可能是另一种选择。现在，使用flexbox排序可以在Bootstrap 4中实现此布局。 无需重复代码。手机上的1-3-2，手机上的1-2-3。

<div class="row">
    <div class="col-md-9">1</div>
    <div class="col-md-12 flex-md-last flex-unordered">2</div>
    <div class="col-md-3">3</div>
</div>

演示：http://www.codeply.com/go/Tg7XcOOz6N

Bootstrap 3：在行上推/拉列

3 个答案:

2017年更新