CODEWITHSUNDEEP
csstwitter-bootstrapgridbootstrap-4
Abbaszadeh
Abbaszadeh

Reputation: 63

Bootstrap 4 right Column on top on mobile view

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.

Upvotes: 6

Views: 6597

Answers (3)

Prid
Prid

Reputation: 1624

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.

Upvotes: 3

Tian Reagon
Tian Reagon

Reputation: 118

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

Upvotes: 4

r_amir
r_amir

Reputation: 11

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.

Upvotes: 1

Related Questions