bootstrap v4推拉走了

Question

看看bootstrap v4更新：

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

...为新的flexbox驱动的订单类删除了push和pull修饰符类。 例如，代替.col-8.push-4和.col-4.pull-8，您将使用.col-8.order-2和.col-4.order-1。

但是当我使用order函数时，它似乎与推拉方法的工作方式不同。 它将行堆叠起来，就像下面代码中的第一行一样。

我的目标是在左侧有一个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>