Bootstrap：更改 3 列的 Div 顺序

Question

我正在尝试使用 Bootstrap 3 对三列进行排序。我在大屏幕上有以下列：

-----------------------------
|       | Name              |
| Video |-------------------|
|       | Description       |
-----------------------------

我希望它们在移动设备上像这样堆叠：

-----------------------------
| Name                      |
-----------------------------
| Video                     |
-----------------------------
| Description               |
-----------------------------

我一直在尝试使用推和拉来堆叠它们，但我只能让它们像这样堆叠在我的桌面上：

-----------------------------
|       | Name              |
| Video |--------------------
|       |
-----------------------------
        | Description       |
        ---------------------

我无法让描述浮出水面。听起来这是一个简单的问题，但我在思考它时遇到了麻烦。任何帮助将不胜感激！

Answer 1

我假设您一直在使用 bootstrap 的 col-*-push-* 和 col-*-pull-* classes。它们的局限性在于，由于它们应用边距来实现效果，因此它们只能水平移动元素。

您可以使用 pull-right class 来解决此问题，它会改为设置浮动方向。示例如下所示。

div { color:white; }

#Name { background:red; height:50px; }
#Video { background:green; height:100px; }
#Description { background:blue; height:50px; }

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

<div id="Name" class="col-xs-12 col-sm-8 pull-right">Name</div>
<div id="Video" class="col-xs-12 col-sm-4">Video</div>
<div id="Description" class="col-xs-12 col-sm-8 pull-right">Description</div>

Bootstrap：更改 3 列的 Div 顺序

Bootstrap: Change Div Order for 3 Columns

twitter-bootstrap-3