18

I've two columns with the class col-md-12 each.

In desktop view they should display like:

Col **1** 
Col **2**

In the mobile view the should display like this:

Col **2**
Col **1**

Is this even possible with the column ordering of Bootstrap?

My current code:

<div class="row">
    <div class="col-xs-push-12 col-md-12">
        Col 1
    </div>
    <div class="col-xs-pull-12 col-md-12">
        Col 2
    </div>
</div>
dippas
  • 58,591
  • 15
  • 114
  • 126
Cray
  • 5,307
  • 11
  • 70
  • 166

4 Answers4

27

UPDATE (FEB 2018) - v4+

Now that bootstrap has been released, you can achieved that using order utility classes as you were able to do it in beta version (see old update below), with the difference that they've added these 3 new classes:

.order-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}

Snippet

.p-2 {
  background: red;
  border: white 5px solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-first order-lg-2">2</div>
</div>

OLD UPDATE (OCT 2017) - v4.0.0 beta

With the release of beta version you can do this using flexbox utilities from bootstrap, such as flex-order

(see answer from @ZimSystem - to see solution with alpha version)

.p-2 {
  background: red;
  border: white 5px solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-1 order-lg-2">2</div>
</div>
Community
  • 1
  • 1
dippas
  • 58,591
  • 15
  • 114
  • 126
25

Update 2021 - Bootstrap 5 beta

The order-* classed work the same way...

<div class="row">
        <div class="col-md-12">
            Col 1
        </div>
        <div class="col-md-12 order-first order-md-0">
            Col 2
        </div>
    </div>

Demo Bootstrap 5

Update 2019 - Bootstrap 4.3+

Now full width, 12 unit col-*-12 columns can be reversed using flexbox ordering.

In older Bootstrap 4 alpha and beta versions the ordering utils were flex-*...

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 flex-first flex-md-unordered">
        Col 2
    </div>
</div>

Demo Bootstrap 4 Alpha

As of Bootstrap 4.0.0 the ordering utils are order-*...

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 order-first order-md-2">
        Col 2
    </div>
</div>

Demo Bootstrap 4.1.0

See the docs at https://getbootstrap.com/docs/4.0/layout/grid/#order-classes

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 3
    This should definitely be the preferred answer now, since it doesn't rely on any external CSS rules, etc. – kevlarr May 26 '17 at 14:57
  • 3
    This needs to be the preferred answer now. – Routhinator Oct 09 '17 at 20:56
  • @kevlarr and Routhinator Hey guys I just updated my answer above with version of beta release. – dippas Oct 13 '17 at 16:54
  • @zimSystem the beta version already let you use `order-` utility classes, check my answer with october update and/or the CSS from beta version, they've updated this utility ;) – dippas Feb 19 '18 at 13:51
  • Dude. What is the deal for us folks who aren't constantly using Bootstrap. Why they make such a naming change. This was painful to find. Appreciate the post. – Leroy105 Jun 16 '18 at 20:33
3

One way around this is to make two versions of Col 2 and put one above Col 1 and one below it. Then use the responsive utilities to hide and show accordingly.

Taylor Foster
  • 1,103
  • 1
  • 11
  • 24
  • 1
    hmm, seems a bit "dirty" – Cray Jul 07 '16 at 14:28
  • It IS a bit dirty, but when we're discussing full-width columns it's one of the better options. If you were using smaller grids we could rely on `col-*-push-*` and `col-*-pull-*` to achieve your desired results. – Robert Jul 07 '16 at 14:35
  • If you want to get really crazy with it, you can use jQuery and [clone it](https://api.jquery.com/clone/) and insert it before Col 1 on a `$(window).resize()` handler. – Taylor Foster Jul 07 '16 at 14:41
2

You can use flexbox, then you can use media queries to change the order:

.row {
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;
}

CODEPEN

or (default order on mobiles and tablets, reverse on desktop):

@media (min-width: 992px) {
  .row {
    /* Setup Flexbox */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* Reverse Column Order */
    -webkit-flex-flow: column-reverse;
    flex-flow: column-reverse;
  }
}

CODEPEN

max
  • 8,632
  • 3
  • 21
  • 55