Pushing and Pulling Columns - Bootstrap 4

Question

This is what I need:

Desktop: B A

Mobile:

A
B

Here is my HTML:

<div class="row">

    <div class="col-md-7 col-sm-7 push-md-5">
        A
    </div>

    <div class="col-md-5 col-sm-5 pull-md-7">
        B
    </div>

</div>

It is in correct order on mobile device but not on Desktop. I have tried a couple of guides and help material but without luck. In most guides they are moving equal columns like 4 or 6 so it's a bit confusing to understand it clearly.

Answer 1

Since Bootstrap v4.x It is worth noting that the push-* and pull-* classes have been replaced by the order-* class.

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

more details and examples can be found here

This means that your example (and answer):

    <div class="row">
        <div class="col-md-7 push-md-5">
            A
        </div>
    
        <div class="col-md-5 pull-md-7">
            B
        </div>
    </div>

Becomes:

    <div class="row">
        <div class="col-md-7 order-md-5">
            A
        </div>
    
        <div class="col-md-5 order-md-7">
            B
        </div>
    </div>

And with the example given in the question, it would work.

However, as mentioned in the comments below, you don't need to use order-md-5 and order-md-7 as the order classes are not bound to the grid system other than to allow full control of the positioning of up to 12 columns.

This means that order-md-1 and order-md-2 are a more suitable solution for this.

There are also helpers such as this:

    <div class="container">
      <div class="row">
        <div class="col order-last">
          First, but last
        </div>
        <div class="col">
          Second, but unordered
        </div>
        <div class="col order-first">
          Third, but first
        </div>
      </div>
    </div>