通过Bootstrap4订购列

Question

我有3列,我想在桌面和移动设备上以不同的方式订购.目前,我的网格看起来像这样:

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

在移动视图中,我想要输出以下内容:

1-3-2

不幸的是,我没有得到如何使用Bootstrap 4中的.col-md-push-*和.col-md-pull-*类来解决这个问题.

Answer 1

2018年 - 使用最新的Bootstrap 4重新审视此问题.

该响应排序类现在order-first,order-last和order-0-order-12

该引导4 推 拉力类现在是push-{viewport}-{units}和pull-{viewport}-{units}与xs-缀已被删除.在mobile/xs上获得所需的1-3-2布局将是:Bootstrap 4 push pull demo(这仅适用于4.0之前版本)

Bootstrap 4.1+

由于Bootstrap 4是flexbox,因此可以轻松更改列的顺序.的COLS可以订购从order-1到order-12,响应如order-md-12 order-2(最后上md,第二上xs相对)到母体.row.

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

演示:使用order-*类更改顺序

桌面(大屏幕):

移动(小屏幕):

也可以使用flexbox方向工具更改列顺序...

<div class="container">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-8">
            2
        </div>
        <div class="col-md-4">
            1st on mobile
        </div>
    </div>
</div>

演示:Bootstrap 4.1使用Flexbox方向更改订单

旧版演示
演示 - alpha 6
演示 - 测试版(3)

查看更多Bootstrap 4.1+订购演示

相关:
Bootstrap 4中的列排序使用push/pull和col-md-12
Bootstrap 4更改列的顺序

ACB ABC

Answer 2

这也可以通过CSS"Order"属性和媒体查询来实现.

像这样的东西:

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

CodePen链接:https://codepen.io/preston206/pen/EwrXqm

Answer 3

即使这样也行得通：

<div class="container">
            <div class="row">
                <div class="col-4 col-sm-4 col-md-6 order-1">
                    1
                </div>
                <div class="col-4 col-sm-4  col-md-6 order-3">
                    2
                </div>
                <div class="col-4 col-sm-4  col-md-12 order-2">
                    3
                </div>
            </div>
          </div>