Bootstrap 3：在行上推/拉列答案

【问题标题】：Bootstrap 3: Push/pull columns over rowsBootstrap 3：在行上推/拉列
【发布时间】：2021-04-19 21:35:06
【问题描述】：

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

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

【问题讨论】：

您找到解决方法了吗？

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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。

【讨论】：

没有聪明的方法来保存这个DRY？（也就是说，感谢您的帮助。至少这是一个解决方案！）
并非如此，我为此使用的一个解决方案是让一段 JavaScript 监听断点更改并移动内容。另一种可能是研究 flexbox 和 order 属性并实现自己的网格结构

【解决方案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>

【讨论】：

这个例子之所以有效，是因为所有三个 md 宽度的总和不超过 12。推拉 wrapped 的列是 OP 正在寻求解决的问题。

【解决方案3】：

2017 年更新

对于某些人来说，这可能是另一种选择。这种布局现在可以在 Bootstrap 4 中使用 flexbox 排序。 无需重复代码。大型 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://codeply.com/go/Tg7XcOOz6N

【讨论】：