Column ordering in Bootstrap 4 with push/pull and

Question

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>

Answer 1

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

Answer 2

UPDATE (FEB 2018) - v4.0.0

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>

Answer 3

Update 2018 - Bootstrap 4.1.0

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

Answer 4

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.