6

I have a Bootstrap 4 Page like this:

<div class="row">
    <div class="col-md-8">
        A
    </div>
    <div class="col-md-4">
       B
    </div>
</div>

Looks like:

-----
|A|B|
-----

So if I look at it on a mobile Device, the Column A is on top, but I want the B on top. Is this possible? I tried it with push an pull, but it didn't work Because I'm using Bootstrap 4.

Abbaszadeh
  • 63
  • 1
  • 5
  • 1
    Possible duplicate of [Column ordering in Bootstrap 4](https://stackoverflow.com/questions/37814508/column-ordering-in-bootstrap-4) – user8803663 Oct 24 '17 at 22:43

3 Answers3

4

With Bootstrap 4 you can use the following classes.

order-first, order-last and order-0 - order-12

on your element.

Have a look here: Column ordering in Bootstrap 4

Tian Reagon
  • 118
  • 2
  • 11
3

None of the answers gave a code example showing how order-first works, so here you go:

<div class="row">
    <div class="col-md-8">
        A
    </div>
    <div class="col-md-4 order-first order-md-last">
       B
    </div>
</div>

In desktop view (md, lg and xl) it will use order-md-last to preserve the current behavior (B below A)

In mobile view (xs and sm) it will now use order-first to order B above A.

Prid
  • 1,272
  • 16
  • 20
1

have you tried like this

<div class="row">
    <div class="col-md-8 col-sm-8 col-xs-8">
        A
    </div>
    <div class="col-md-4 col-sm-4 col-xs-4">
       B
    </div>
</div>

The Bootstrap grid system has four classes col-xs, col-sm, col-md, col-lg. That classes can be combined to create more dynamic and flexible layouts.

r_amir
  • 11
  • 1
  • tried. it works . Also works if we examine the nodes. I use pug to code web app instead of html. Padding is often a headache to me. – Jeff Bootsholz Oct 25 '17 at 02:41