如何使元素在双列布局中显示为第2，在使用Bootstrap 3时显示第3

Question

我使用Bootstrap获得了以下布局：

[1][2]
[3]

它堆叠在手持设备的一列中，如下所示：

[1]
[2]
[3]

我需要像这样堆叠：

[1]
[3]
[2]

这是怎么做到的？

Answer 1

你可以像这样使用嵌套..

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                1
            </div>
            <div class="col-md-12">
                3
            </div>
        </div>
    </div>
    <div class="col-md-6">
        2
    </div>
</div>

演示：http://codeply.com/view/NxRorezDfU

Answer 2

Bootstrap中有一个名为column ordering的功能。

以下是working example符合您的需求：

＆＃13;

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

<div class="row">
    <div class="col-sm-5 ">
        Content 1
    </div>
    <div class="col-sm-5 col-sm-push-5">
        Content 3
    </div>
    <div class="col-sm-2 col-sm-pull-5">
        Content 2
    </div>
</div>
    
</div>

＆＃13;

＆＃13;

＆＃13;