70

I have this simple scenario:

<div class="row">
    <div class="col-md-12 col-lg-6 col-xl-7">A</div>
    <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

basically if md

A
B

I would like it, if md

B
A

I have tried many variants found on web, like flex-first and whatnot.. can't seem to get it to work

Any ideas?

isherwood
  • 58,414
  • 16
  • 114
  • 157
Patrioticcow
  • 26,422
  • 75
  • 217
  • 337

7 Answers7

77

If you want to change order on md and larger sizes you can use order-md-, this is provided by bootstrap. It looks like, if you want to change order only on md size you will have to define normal order on one larger size Fiddle

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-12 order-md-2">A</div>
  <div class="col-md-12 order-md-1">B</div>
</div>
Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176
69

It's also possible to use the flex- helper classes to solve this issue. This solution allows you to reverse the order without the order count on the columns.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex-column-reverse flex-lg-row">
  <div class="col-md-12 col-lg-6 col-xl-7">A</div>
  <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

The flex-direction is now reversed by default (md) and will be overriden on the lg breakpoint.

Tim Vermaelen
  • 6,869
  • 1
  • 25
  • 39
  • This is exactly what I was looking for! I'm working on setting up a website with Japanese, and I was going for a traditional right-to-left layout on larger screens, but then push those columns into rows on smaller width devices (in the other order, so it still reads top-down). –  Jul 06 '18 at 18:07
  • 4
    Should be noted that you can also use .flex-row-reverse – Zanderi Dec 10 '18 at 21:14
  • +1 should be top answer..it doesn't need you to change anything between the columns instead just modifying a single line.. – aries Nov 17 '20 at 03:34
  • For me this breake the responsiviness in bootstrap 5 – G M Jan 22 '21 at 10:09
  • The question is tagged bootstrap-4 – Tim Vermaelen Jan 22 '21 at 10:21
12

For Bootstrap v4.1 you can use 

<div class="row flex-row-reverse">
    <div class="col-md-12 col-lg-6 col-xl-7">A</div>
    <div class="col-md-12 col-lg-6 col-xl-5">B</div>
</div>

More information here: https://getbootstrap.com/docs/4.1/utilities/flex/#direction

Chris Andersson
  • 1,291
  • 11
  • 16
11

Easiest solution will be:

.row{
    flex-direction: row-reverse;
}
Thorben Schmitt
  • 111
  • 1
  • 2
5

This works for me:

<div class="col-md order-1">First column</div>
<div class="col-md order-md-1">Second column</div>

Output on responsive state:

Second column
First column
Sven Eberth
  • 3,057
  • 12
  • 24
  • 29
Gaurav
  • 51
  • 1
  • 1
3

I know the question is about Bootstrap 4, but I saw some people asking how to do it in version 5. Here's the example:

<div class="col-md-6 order-2 order-md-1">
    <!-- YOUR CODE -->
</div>

<div class="col-md-6 order-1 order-md-2">
    <!-- YOUR CODE -->
</div>

ref: https://getbootstrap.com/docs/5.0/layout/columns/#order-classes

Guilherme Silva
  • 41
  • 6
3

For Bootstrap 5, the class names have changed to order-x where x is the order, i.e. (directly from the docs):

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

See more at https://getbootstrap.com/docs/5.0/layout/columns/#reordering

fullStackChris
  • 1,300
  • 1
  • 12
  • 24