通过Bootstrap4订购列

Question 1

我想在台式机和移动设备上以不同的方式订购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-*and.col-md-pull-*类解决此问题。

Question 2

2018年-使用最新的Bootstrap 4。

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

该引导4推拉力类现在是push-{viewport}-{units}和pull-{viewport}-{units}与xs-缀已被删除。要在移动设备/ xs上获得所需的1-3-2布局，请执行以下操作：Bootstrap 4 push pull demo（仅适用于4.0 beta之前的版本）

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方向utils更改列顺序...

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

演示：具有Flexbox方向的Bootstrap 4.1更改顺序

较旧版本的演示
demo-alpha 6
demo-beta（3）

查看更多Bootstrap 4.1+订购演示

相关：
使用推/拉和col-md-12
引导程序4的Bootstrap 4中的列顺序更改列的顺序

ACB ABC

Question 3

这也可以通过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

Question 4

即使这将工作：

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

Question 5

我正在使用Bootstrap 3，所以我不知道是否有更简单的方法来执行Bootstrap 4，但是此CSS应该适合您：

.pull-right-xs {
    float: right;
}

@media (min-width: 768px) {
   .pull-right-xs {
      float: left;
   }
}

...并将类添加到第二列：

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

编辑：

哦...看来我上面写的完全是a。Bootstrap 4：X中的pull-xs-right类只需将其添加到第二列，它应该可以正常工作。

Question 6

由于列排序在Bootstrap 4 beta中不起作用，如上面重新回答的代码中所提供的代码所述，因此您需要使用以下内容（如Codeply 4 Flexbox订单演示中所述-alpha / beta链接在答案）。

<div class="container">
<div class="row">
    <div class="col-3 col-md-6">
        <div class="card card-block">1</div>
    </div>
    <div class="col-6 col-md-12  flex-md-last">
        <div class="card card-block">3</div>
    </div>
    <div class="col-3 col-md-6 ">
        <div class="card card-block">2</div>
    </div>
</div>

但是请注意，“ Flexbox订单演示-Beta”转到了alpha代码库，将代码库更改为Beta（并运行它）会导致div在单列中错误显示-但这看起来像是代码分割问题，因为剪切和将代码粘贴到codeply之外的操作如上所述。

Question 7

您可以做两个不同的容器，一个使用移动订单并隐藏在桌面屏幕上，另一个使用桌面订单并隐藏在移动屏幕上