CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
schnawel007
schnawel007

Reputation: 4020

Bootstrap right Column on top on mobile view

I have a Bootstrap Page like this:

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       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.

Upvotes: 191

Views: 101741

Answers (11)

Onno Faber
Onno Faber

Reputation: 661

This is now done (in Bootstrap v4) by adding order-# classes.

See https://getbootstrap.com/docs/4.1/migration/#grid-system-1

Like this:

<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>

Upvotes: 11

M61Vulcan
M61Vulcan

Reputation: 337

I have three bootstrap 4 columns of different sizes. As the screen gets smaller the third column is hidden, then when the screen gets smaller still and the divs are stacked the order changes so that column 2 is at the top.

    <div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
        <h3>LEFT HAND SECTION</h3>
        <p>For news, links photos or comments.</p>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
        <h3>MAIN SECTION</h3>
        <p>The main content for the page.</p>
    </div>
    <div class="col-xs-12 col-md-4 d-none d-md-block order-last">
        <h3>BLANK SECTION</h3>
        <p>Will usually just be blank.</p>
    </div>

I hope this helps. I found it difficult to understand this but finally got there with the help of this thread, but it was a bit hit and miss.

Upvotes: 5

lky
lky

Reputation: 1129

Bootstrap 4 includes classes for flex. See: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

<div class="row flex-column-reverse flex-md-row">
    <div class="col-sm-10">
        Col 1
    </div>
    <div class="col-sm-2">
       Col 2
    </div>
</div>

Upvotes: 4

Schmalzy
Schmalzy

Reputation: 17324

Use Column ordering to accomplish this.

col-md-push-6 will "push" the column to the right 6 and col-md-pull-6 will "pull" the column to the left on "md" or greater view-ports. On any smaller view-ports the columns will be in normal order again.

I think what throws people off, is that you have to put B above A in your HTML. There may be a different way to do this where A can go above B in the HTML, but I'm not sure how to do it...

DEMO

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

view-port >= md

|A|B|

view-port < md

|B|
|A|

Upvotes: 282

tomb
tomb

Reputation: 1436

This worked for me on Bootstrap 4:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 order-md-last">
      <%= render 'form'%>
    </div>
    <div class="col-md-8 order-md-first">
      CONTENT
    </div>
  </div>
</div>

Upvotes: 4

Abram
Abram

Reputation: 41904

In Bootstrap 4, let's say you want to have one order for large screens and a different order for smaller screens:

<div class="container">
  <div class="row">
    <div class="col-6 order-1 order-lg-2">
      This column will be ordered second on large to extra large screens
    </div>
    <div class="col-6 order-2 order-lg-1">
      This column will be ordered first on large to extra large screens
    </div>
  </div>
</div>

You can omit order-1 and order-2 above. Just added for clarity. Default order will be the order the columns appear in the html.

For more info https://getbootstrap.com/docs/4.1/layout/grid/#reordering

Upvotes: 21

Eric Conner
Eric Conner

Reputation: 10752

I used:

.row {
   display: flex;
   flex-direction: row-reverse;
}

Upvotes: 4

Juan Mireles II
Juan Mireles II

Reputation: 117

In Bootstrap V4 (Released January 18, 2018) You can use Reordering Classes. Info here under Reordering tab.

https://getbootstrap.com/docs/4.0/layout/grid/

Upvotes: 0

Siful I
Siful I

Reputation: 1932

The below code work for me 

.row {
    display: flex;
    flex-direction: column-reverse;
}

Upvotes: 12

salmanhijazi
salmanhijazi

Reputation: 825

Flexbox Direction

For Bootstrap 4, apply one of the following to your .row div:

.flex-row-reverse

For responsive settings:

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse

Upvotes: 39

apritch
apritch

Reputation: 901

It's worth noting that if you are using columns that are not both equal to 6, then the push amount will not equal the initial column size.

If you have 2 columns (A & B) and wish for column A to be smaller and to the right on "sm" or greater viewports, but atop a mobile (xs) viewport, you would use the following:

<div class="row">
    <div class="col-sm-4 col-sm-push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

Otherwise, the alignment of the columns will appear off.

Upvotes: 80

Related Questions