Question

我想使用twitter-bootstrap来定位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>

有一个JSFiddle here

Answer 1

通常，要在不同视图上重新排序Bootstrap列，您应该使用列排序col-XX-push-*和col-XX-pull-*修饰符类。

来源：http://getbootstrap.com/css/#grid-column-ordering

但是，当您尝试重新排序在同一行中溢出的列时（即使用一行显示两行列），这将无效。您可能需要扩展当前的Bootstrap列并添加flex-box支持以获得更好的列排序。

如下所示：（4:10）https://www.youtube.com/watch?v=0i7Xb22zzQM

因此，例如，以下代码将用于重置列顺序（已在代码中安排它[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;
    }
}

使用twitter-bootstrap将div放在2列报纸中的较大设备上，例如＆＃39;订购

1 个答案:

完成小提琴：http://jsfiddle.net/7w90ftkc/