bootstrap v4 推拉消失了

Question

查看引导程序 v4 更新：

https://getbootstrap.com/docs/4.0/migration/#grid-system-1

...为新的 flexbox 驱动的订单类删除了推和拉修饰符类。例如，您可以使用 .col-8.order-2 和 .col-4.order-1 而不是 .col-8.push-4 和 .col-4.pull-8。

但是当我使用 order 函数时，它似乎与 push pull 方法不同。它像下面代码中的第一行一样堆叠行。

我的目标是左侧有一个 img ，右侧有一行文字，然后左侧有文字，右侧有桌面下一行的 img 。当它在较小的屏幕中调整大小时，我希望每个图像都堆叠在它对应的文本之上。

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!--img-->
        </div>
        <div class="col-md-8">
            <!--text-->
        </div>
    </div>
        <div class="row">
            <div class="col-md-8 order-2">
                <!--text-->
            </div>
            <div class="col-md-4 order-1">
                <!--img-->
            </div>
        </div>
</div>

Answer 1

例如，如果您想更改订单，md您可以为该尺寸定义第一个正常订单，然后order-n为所有较小尺寸定义。所以你的代码应该是这样的。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-md-4">
      img
    </div>
    <div class="col-md-8">
      text
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 order-2 order-md-1">
      text
    </div>
    <div class="col-md-4 order-1 order-md-2">
      img
    </div>
  </div>
</div>