我有像这样的手机布局：
--------- | 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>
解决方法
通过设置左侧或右侧属性来推动和拉动工作,它将永远不会包裹到另一行,如您所述.
解决方案是复制第2列或第3列的内容(采用内容或交互量最少的内容).在sm,md和lg上隐藏一个xs和另一个.
在下面的示例中,我重复了第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>
附：没有必要在.row上添加.clearfix,因为它已经包含了.rowfix.即使你希望在最小的布局上有一个12宽的列,也总是添加一个.col-xs-12类,因为它添加了用于否定.row上的负边距的填充.
