bootstrap v4推拉走了

Question

Looking at bootstrap v4 updates:

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

...Dropped push and pull modifier classes for the new flexbox-powered order classes. For example, instead of .col-8.push-4 and .col-4.pull-8, you'd use .col-8.order-2 and .col-4.order-1.

But when I use the order function it doesn't seem to work the same as the push pull method. It stacks the rows up just like the first row in the code below.

My goal is to have a img on the left with text on the right on one row then text on the left and a img on the right on the next row on a desktop. When its resized in a smaller screen I would like each image stacked on top of the text it corresponds with.

<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

If you want to change order for example on md you can define first normal order for that size and then order-n for all smaller sizes. So your code should look like this.

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