Change column order based on device

Question

I want to change the order based on if the user is on mobile or PC.

I want this order for mobile:

A

B

A

B

And this for PC:

A B

B A

What I tried so far:

<div class="row">
    <div class="col-sm-5 col-sm-pull-5">
        Content A
    </div>
    <div class="col-sm-5 col-sm-push-5">
        Content B
    </div>
</div>
<br><br>
<div class="row">
    <div class="col-sm-5 col-sm-push-5">
        Content A
    </div>
    <div class="col-sm-5 col-sm-pull-5">
        Content B
    </div>
</div>

The first row works fine, but the second row doesn't, and I can't see how to fix it. What is the best way to do this?

Answer 1

I think I found your solution here. Try it:

<div class="row">
    <div class="col-md-5">
        Content A
    </div>
    <div class="col-md-5">
        Content B
    </div>
</div>
<br><br>
<div class="row">
    <div class="col-md-5 order-md-1">
        Content A
    </div>
    <div class="col-md-5 order-md-0">
        Content B
    </div>
</div>

in codesnipped you do not see the effect. you have to test it in a browser

---