CODEWITHSUNDEEP
cssbootstrap-4
Patrioticcow
Patrioticcow

Reputation: 27038

How can I reverse the order of columns in Bootstrap 4?

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?

Upvotes: 71

Views: 134248

Answers (7)

Gaurav
Gaurav

Reputation: 51

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

Upvotes: 5

fullStackChris
fullStackChris

Reputation: 1502

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

Upvotes: 4

Guilherme Silva
Guilherme Silva

Reputation: 51

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

Upvotes: 4

Chris Andersson
Chris Andersson

Reputation: 1301

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

Upvotes: 13

Tim Vermaelen
Tim Vermaelen

Reputation: 7059

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.

Upvotes: 72

Thorben Schmitt
Thorben Schmitt

Reputation: 111

Easiest solution will be:

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

Upvotes: 11

Nenad Vracar
Nenad Vracar

Reputation: 122047

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>

Upvotes: 85

Related Questions