Order Columns Through Bootstrap4

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

How to re-order columns in Bootstrap 4?

You can use Bootstrap Hidding Element option and also use Grid System to apply on mobile device col-sm* or col-xs* .
Other option is to use Media Query to apply classes depending of the device width and height.

Example based on your code:

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-md-6 order-md-2 order-lg-2 d-md-block d-sm-none d-xs-none d-none">
            B
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
          <div class="col-lg-12 col-xs-12 col-sm-12 order-lg-1">
            A
          </div>
          <div class="col-lg-12 col-xs-12 col-sm-12 order-lg-2 d-block d-sm-none d-md-none">
            B
          </div>
          <div class="col-lg-12 col-xs-12 col-sm-12 order-lg-3">
            C
          </div>
       </div>
    </div>
</div>

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

Order columns in Bootstrap 4 doesn't work

Bootstrap is mobile first. You will need to add a different class for larger displays.

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-12 order-2 order-sm-1">1
    </div>
    <div class="col-lg-4 col-md-12 order-1 order-sm-2">2
    </div>
  </div>
</div>

Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .order-sm-* applies to small, medium, large, and extra large devices, but not the first xs breakpoint).

---

Note that you have the classes order-2 and order-1. These classes are the same as order-xs-*.

So, if you want special rules only for large displays (lg and xl), just add the classes:

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-md-12 order-2 order-lg-1">1
    </div>
    <div class="col-lg-4 col-md-12 order-1 order-lg-2">2
    </div>
  </div>
</div>

Reorder columns in small devices Bootstrap 4

There are new Reordering helper classes.
Place the divs in HTML as you want them to appear in mobile:

<div class="container">
  <div class="row">
    <div class="col-6 col-md-4">
      [column_1]
    </div>
    <div class="col-6 col-md-4 order-md-12">
      [column_3]
    </div>
    <div class="col-6 col-md-4 order-md-1">
      [column_2]
    </div>    
  </div>
</div>

[column_1] will stay first and unordered. Reorder [column_3] with .order-md-12(will be last for md-size and up) and [column_2] .order-md-1(will be first for md-size and up)

Check jsfiddle

---

Related Topics