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

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

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>