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?

Have you tried to use the [order](https://getbootstrap.com/docs/4.0/utilities/flex/#order) flex property? The col-sm-5 class is fine, order-sm should be 1 (all in right order) and order-X on these elements telling CSS how should be columns ordered on SM-down devices. You should make these columns to be displayed as flex (.d-flex) and to be wrapper (.flex-wrap) — Johnczek, Mar 22 '20 at 11:03

SwissCodeMen · Accepted Answer · 2020-03-22T11:27:40.013

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

edited Mar 22 '20 at 11:27

answered Mar 22 '20 at 11:25

SwissCodeMen

4,222
8
24
34

Nope, not working. Both rows have to move there cols, but both on another way. See the example and my answer. – stijnb1234 Mar 22 '20 at 11:27
I tried it in JSFiddle by moving the result box. For the other solution it works, for this one it doesn't. – stijnb1234 Mar 22 '20 at 11:29
but it works exactly as you described in the question ... **in codesnipped you do not see the effect. you have to test it in a browser** – SwissCodeMen Mar 22 '20 at 11:30
I'm sorry, you are right. Thanks! – stijnb1234 Mar 22 '20 at 11:36
no problem... good success with the code – SwissCodeMen Mar 22 '20 at 11:39

score 0 · Answer 2 · answered Mar 22 '20 at 11:11

0

I found a solution, but I don't think it's the best way to do it:

<div class="row">
    <div class="col-sm-5 order-sm-0 order-lg-1">
        Content A
    </div>
    <div class="col-sm-5 order-sm-1 order-lg-0">
        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>

answered Mar 22 '20 at 11:11

stijnb1234

184
4
19

I think that using order property of flex boxes is perfectly fine solution. Order property of flex was designed exactly for this purpose. The only thing you should be aware is bad compatibility of IE. There might be some problems displaying the content like this in this fosile. – Johnczek Mar 22 '20 at 11:19

Change column order based on device

2 Answers2

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