Css 使用bootstrap3重新排序

有人能帮我用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>

2.
1.
3.

在手机上看起来不错，但在桌面上就不行了

解决方案

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

2.
1.
3.

为每个应用程序使用自定义类，并使用flex box CSS概念

HTML

<div class="row">
  <div class="col-md-4 one">First box</div>
  <div class="col-md-4 two">Second Box</div>
  <div class="col-md-4 three">Third Box</div>
</div>

---

这很简单，关键是我们不能在移动模式下对列重新排序。我们应该首先将其视为移动设备，然后使用

.col-*-push-#

，

.col-*-pull-#

帮助程序类对较大屏幕上的列重新排序：

.red{
背景：红色；
}
蓝先生{
背景：蓝色；
}
格林先生{
背景：绿色；
}

2.
1.
3.

您是否尝试过这样做，能否先发布一些codethink mobile，然后将div-2放在首位。我通常会将它们分成两个重复的div，因此上面的“1”将隐藏类xs，下面的“1”将隐藏类xs。有道理吗？我很久以前也遇到过同样的问题。试试这个，当然它对你有帮助：看看这个-对于我的项目，我需要使用bootstrap push/pull，但是你的示例代码可以很好地工作，谢谢；o）

.row {
  display: flex;
  flex-direction: column;
}

.one {
  order: 2;
}

.two {
  order: 1;
}

.three {
  order: 3;
}