css - 使用 bootstrap 3 重新排序

Question

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

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

对此:

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

我知道这与推/拉有关，但我似乎无法正确处理。

编辑

还有一些我无法开始工作的代码:

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