使用bootstrap重新排序3

Question

有人可以帮助我用html重新排序下面的列使用bootstrap 3:

 ----- ----- -----
|  1  |  2  |  3  |
 ----- ----- -----

对此:

 -----
|  2  |
 -----
|  1  |
 -----
|  3  |
 -----

我知道这与推/拉有关,我似乎无法做到正确.

编辑

和som代码,我无法工作:

<div class="row">
    <div class="col-md-8 col-xs-12">2</div>
    <div class="col-md-2 col-xs-12 col-md-push-2">1</div>
    <div class="col-md-8 col-xs-12 col-md-pull-2">3</div>
</div>

在移动设备上它看起来不错但不在桌面上.

解

<div class="row">
    <div class="col-md-8 col-xs-12 col-md-push-2">2</div>
    <div class="col-md-2 col-xs-12 col-md-pull-8">1</div>
    <div class="col-md-8 col-xs-12">3</div>
</div>

Answer 1

这非常简单，关键点是我们无法在移动模式下对列重新排序。我们应该首先将其视为移动设备，然后使用.col-*-push-#,.col-*-pull-#辅助类在更大的屏幕上重新排序列：

.red {
    background: red;
}
.blue {
    background: blue;
}
.green {
    background: green;
}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="red col-sm-4 col-sm-push-4">2</div>
        <div class="green col-sm-4 col-sm-pull-4">1</div>
        <div class="blue col-sm-4">3</div>
    </div>
</div>