How to Reverse the Order of Columns in Bootstrap 4

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

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>

Inverse order of elements in bootstrap 4

What you need are the classes order-first order-md-2 for the second element text column:

The order-first class says: Make this column come first.

The order-md-2 class says: On screens that are md (medium) or larger make this column come in second place.

Here's the code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="sub-title">        <div>simpleTextDynamicIndoorNavigationTitle</div>    </div>        <div class="row">        <div class="col-md-6">            <div>text sample</div>        </div>        <div class="col-md-6">            <img src="https://picsum.photos/57">        </div>    </div>
    <div class="row">        <div class="col-md-6">            <img src="https://picsum.photos/56">        </div>        <div class="col-md-6 order-first order-md-2">            <div>Second element text</div>        </div>    </div>        <div class="sub-title" id="use-cases-title">        <div>simpleTextUseCasesTitle</div>    </div>    <div class="row">        <div class="col-md-6">            <div>text sample</div>        </div>        <div class="col-md-6">            <img src="https://picsum.photos/55">        </div>    </div></div>

Bootstrap change order of columns

Check out this updated JSFiddle. https://jsfiddle.net/bq1L3gax/5/

All you need to do is use the CSS order property.

.row:nth-child(2n) .col-sm-6:first-child {
   order: 2;
}

Reverse the order of rows in bootstrap for mobile devices

Yes it's possible since the order classes work on any flexbox container...

<div class="container d-flex flex-column">
    <div class="row order-sm-last order-md-0">
        <div class="col-12">
            row 1
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            row 2
        </div>
    </div>
</div>

https://codeply.com/p/uG4VTBWWak

Order columns through Bootstrap4

2021 - Bootstrap 5

The responsive ordering classes are now order-first, order-last and order-0 - order-5

Demo

2018 - Bootstrap 4

The responsive ordering classes are now order-first, order-last and order-0 - order-12

The Bootstrap 4 **push** **pull** classes are now `push-{viewport}-{units}` and `pull-{viewport}-{units}` and the `xs-` infix has been removed. To get the desired 1-3-2 layout on mobile/xs would be: [Bootstrap 4 push pull demo](http://www.codeply.com/go/OmrcmepbUp) (This only works pre 4.0 beta)

Bootstrap 4.1+

Since Bootstrap 4 is flexbox, it's easy to change the order of columns. The cols can be ordered from order-1 to order-12, responsively such as order-md-12 order-2 (last on md, 2nd on xs) relative to the parent .row.

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

Demo: Change order using order-* classes

Desktop (larger screens):
Sample Image

Mobile (smaller screens):
Sample Image

It's also possible to change column order using the flexbox direction utils...

<div class="container">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-8">
            2
        </div>
        <div class="col-md-4">
            1st on mobile
        </div>
    </div>
</div>

Demo: Bootstrap 4.1 Change Order with Flexbox Direction

Older version demos

demo - alpha 6

demo - beta (3)

See more Bootstrap 4.1+ ordering demos

Related

Column ordering in Bootstrap 4 with push/pull and col-md-12

Bootstrap 4 change order of columns

A-C-B A-B-C

How to Reorder Columns with Bootstrap 4?

Bootstrap 4 uses flex/flexbox. So yes you have the option of ordering elements/columns.

I think what you want is using just the Bootstrap-4 classes of order-{number} with your col classes.

Below is the solution:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/><div class="container">  <div class="row align-items-center">      <div class="col-md-3 col order-2 order-sm-1">      <div class="right-user-account">        <a class="fd-head-login" href="#">          <i class="fa fa-caret-down"></i>User Account</a>      </div>    </div>        <div class="col-md-6 text-center col-md-6 order-1 order-sm-2">      <a href="#">        <img src="images/logo.png">      </a>    </div>
    <div class="col-md-3 order-3">      <div class="left-login">        <a class="fd-head-login" href="#">Login<i class="fa fa-user"></i></a>      </div>    </div>      </div></div>

Re-ordering a Bootstrap 4 grid

Yes, It is correct. Extra columns wraps onto a new line.

You can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers. - bootstrap-4

You have used the order-* classes properly. However, since you do not change the order of the first column, you should not use an oder-*class for it. Use order-md-1 for Button ads and order-md-last for Catigories column.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
  <div style='background-color: #ccc;' class="col-md-4">
    Call to Actions
  </div>
  <div style='background-color: #eee;' class="col-md-12 order-md-last">
    Categories
  </div>
  <div style='background-color: #ddd;' class="col-md-8 order-md-1">
    Button ads
  </div>
</div>