Reordering with bootstrap 3

Question

Can someone help me with the html to reorder columns below using bootstrap 3:

 ----- ----- -----
|  1  |  2  |  3  |
 ----- ----- -----

To this:

 -----
|  2  |
 -----
|  1  |
 -----
|  3  |
 -----

I know this has something to do with push/pull I just cant to seem to get it right.

Edit

And som code that i can't get to work:

<div class="row">
    <div class="col-md-8 col-xs-12">2</div>
    <div class="col-md-2 col-xs-12 col-md-push-2">1</div>
    <div class="col-md-8 col-xs-12 col-md-pull-2">3</div>
</div>

On mobile it looks good but not on desktop.

Solution

<div class="row">
    <div class="col-md-8 col-xs-12 col-md-push-2">2</div>
    <div class="col-md-2 col-xs-12 col-md-pull-8">1</div>
    <div class="col-md-8 col-xs-12">3</div>
</div>

Answer 1

This is pretty straightforward, they key point is that we cannot reorder the columns in mobile mode. We should think of it as mobile first, then reorder the columns on larger screens using .col-*-push-#, .col-*-pull-# helper classes:

.red {
    background: red;
}
.blue {
    background: blue;
}
.green {
    background: green;
}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="red col-sm-4 col-sm-push-4">2</div>
        <div class="green col-sm-4 col-sm-pull-4">1</div>
        <div class="blue col-sm-4">3</div>
    </div>
</div>

Answer 2

Use a custom class for each and use the flex box CSS concept.

HTML

<div class="row">
  <div class="col-md-4 one">First box</div>
  <div class="col-md-4 two">Second Box</div>
  <div class="col-md-4 three">Third Box</div>
</div>

CSS

.row {
  display: flex;
  flex-direction: column;
}

.one {
  order: 2;
}

.two {
  order: 1;
}

.three {
  order: 3;
}

Codeply