Twitter bootstrap 使用twitter引导将div定位在2列的大型设备上'；报纸般的'；秩序

我想使用twitter引导定位div元素，以便在较小的设备上，div按演示的顺序显示：

小屏幕：

|1|
|2|
|3|
|4|

大屏幕：

|1|3|
|2|4|

我认为一些向左拉和向右拉的类可能会达到目的，但运气不好：

<div class="row">
    <div class="well well-lg clearfix">
        <div class="col-xs-12 col-md-6 pull-left">
            <div class="alert alert-success">1</div>
        </div>
        <div class="col-xs-12 col-md-6 pull-left">
            <div class="alert alert-warning">2</div>
        </div>
        <div class="col-xs-12 col-md-6 pull-right">
            <div class="alert alert-info">3</div>
        </div>
        <div class="col-xs-12 col-md-6 pull-right">
            <div class="alert alert-danger">4</div>
        </div>
    </div>
</div>

1.
2.
3.
4.

---

有一个

通常要对不同视图上的引导列重新排序，您应该使用列排序

col XX push-*

和

col XX pull-*

修饰符类

资料来源：

但是，当您试图对同一行中溢出的列重新排序时（即使用一行显示两行列），这将不起作用。您可能需要扩展当前的引导列，并添加flex box支持，以便更好地进行列排序

如图所示：（4:10）

例如，以下代码将用于重置列顺序（已经在代码中安排了[1 3 2 4]）：

在这里完成小提琴演奏：

@media (max-width: 992px){
    .flex-row {
        display:flex;
        flex-direction:row;
        flex-flow: column;
        width: 100%;
    }
    .col-1 {
      order: 1;
    }
    .col-2 {
      order: 2;
    }
    .col-3 {
      order: 3;
    }
    .col-4 {
      order: 4;
    }
}