How To Reorder Bootstrap Columns Vertically

I'm trying to build the following layout in Bootstrap v3: | Small | Large | |--------------|--------------------| | [A ] | [A ][B ] | | [A.1

Solution 1:

You can achieve this with flexbox.

All three boxes need to be inside a flex container display: flex;. You then give all of the div's inside the flex container an order that kicks in using a media query in the desired screen width order: 1;.

The other main parts of the CSS are there to make sure that the three boxes are sized correctly into a column.

flex-direction: row;
flex-grow: 1;
flex-wrap: wrap

The HTML

<divclass="container"><divclass="row flex-container"><divid="sectionA"class="col col-sm-12 col-md-6 a">Section A</div><divid="sectionAInfo"class="col col-xs-12 a">More Info about Section A</div><divid="sectionB"class="col col-sm-12 col-md-6 b">Section B</div></div></div>

The CSS

@media screen and (min-width: 991px) {
  .flex-container {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-wrap: wrap
  }
  #sectionA {
    order: 1;
  }
  #sectionAInfo {
    order: 3;
  }
  #sectionB {
    order: 2;
    float: right;
  }
}

A working codepen https://codepen.io/Washable/pen/zPoeqY?editors=1100