bootstrap v4 push pull gone

user_8928632 0
Viewed 9444

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>
bootstrap-4 css html
1 Answers

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>

user_46207710
Related