How to re-order columns in Bootstrap 4?

Question

I'm fairly new to bootstrap and I have been having trouble re-ordering columns when re-sized in mobile.

So far this is what I have tried:

<div class="container">
<div class="row">
    <div class="col-lg-5 order-lg-1">
        B
    </div>
    <div class="col-lg-5">
      <div class="col-lg-12 order-lg-0">
        A
      </div>
      <div class="col-lg-12 order-lg-2">
        C
      </div>
   </div>
</div>
</div>

What I wanted to achieve is something like this: https://i.stack.imgur.com/9wPO6.jpg

And when I run my code and resized in mobile it turns out like this: B A C

Any help would be greatly appreciated! Thanks!

Can you show CSS for order-lg-x classes? Or create a stackblitz? — MonkeyScript, Jun 24 '20 at 03:58
Unfortunately no, but I solved it using bootstrap's hiding elements. Thanks anyways! — Ross V, Jun 24 '20 at 07:22

score 0 · Accepted Answer · answered Jun 24 '20 at 02:59

You can use Bootstrap Hidding Element option and also use Grid System to apply on mobile device col-sm* or col-xs* . Other option is to use Media Query to apply classes depending of the device width and height.

Example based on your code:

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 order-md-2 order-lg-2 d-md-block d-sm-none d-xs-none d-none">
            B
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <div class="col-lg-12 col-xs-12 col-sm-12 order-lg-1">
            A
          </div>
          <div class="col-lg-12 col-xs-12 col-sm-12 order-lg-2 d-block d-sm-none d-md-none">
            B
          </div>
          <div class="col-lg-12 col-xs-12 col-sm-12 order-lg-3">
            C
          </div>
       </div>
    </div>
</div>

I did try using the hiding elements and it worked. Thanks! – Ross V Jun 24 '20 at 07:17 — Ross V, Jun 24 '20 at 07:17

score 0 · Answer 2 · answered Jun 24 '20 at 04:05

You can simply make the columns like this.

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="col-sm-12">
        A
      </div>
      <div class="col-sm-12">
        C
      </div>
    </div>
    <div class="col-sm-6">
        B
    </div>
   </div>
</div>

How to re-order columns in Bootstrap 4?

2 Answers2