Bootstrap Change Order of Columns

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;
}

How do I change Bootstrap 3 column order on mobile layout?

You cannot change the order of columns in smaller screens but you can do that in large screens.

So change the order of your columns.

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

By default this displays the main content first.

So in mobile main content is displayed first.

By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.

Working fiddle here.

Bootstrap 4x: Can you change column order based on viewport size?

Yes you can use the order classes for the grid (which uses flexbox) https://getbootstrap.com/docs/4.0/layout/grid/#order-classes

<div class="row">
    <main class="col-sm-8 order-md-2">
        [Page Content]
    </main>
    <nav class="col-sm-2 px-3 order-md-1">
        [Nav Links]
    </nav>
    <section class="col-sm-2 order-md-3">
        [Sidebar Content]
    </section>
</div>

To order at breakpoints

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>

Bootstrap 4: how to change the order of a columns when the screen size changes

You can make use of Bootstrap 4's order classes.

Unfortunately Bootstrap 4's layout classes are mobile-first, so you'll need to specify that the text should come after the image by default, and override this for large screens.

To drop the text below the image on medium and smaller devices, you'll want to give the text the classes order-2 and order-md-1, and the image the classes order-1 and order-md-2.

This can be seen in the following:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<section id="" class="pt-3 mt-3">  <div class="container">    <div class="row">      <div class="col-md-6 my-auto text-right order-2 order-md-1">        <h3 class="display-3 lato_text">Description</h3>        <p class="lead">On the map, click on an OddJob to get a quick preview.</p>        <p class="lead">In the preview, you will see the title and price of the job.</p>      </div>      <div class="col-md-6 order-1 order-md-2">        <div class="text-center">          <img id="phone-screenshot" src="http://placehold.it/100" class="img-fluid mb-3">        </div>      </div>    </div>  </div></section>

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

order div breakpoint mobile Bootstrap 4

Use order-first and orader-md-0 classes for the content 2 column.

order-first orders the column first in the row. While order-md-0 resets the order of the column when the md breakpoint is reached.

There is no way to order the columns for mobile only because bootstrap has removed all the variants of *-xs-* classes. Therefore, you need to use both of classes.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" /><div class="row">  <div class="col-12 col-md-7">    Content 1  </div>  <div class="col-12 order-first order-md-0 col-md-5">    Content 2  </div></div>

Bootstrap Change Order of Columns