How to reorder bootstrap columns vertically

I'm trying to build the following layout in Bootstrap v3:

<pre><code>| <b>Small</b> | <b>Large</b> | |--------------|--------------------| | [A ] | [A ][B ] | | [A.1 ] | [A.1 ] | | [B ] | | </code></pre>

Although this has been asked many previous times before...

• How do I change Bootstrap 3 column order on mobile layout?
• Reordering divs responsively with Twitter Bootstrap?
• Bootstrap 3: Change vertical ordering of .col-X elements when collapsing
• Bootstrap 3 grid collapse order

All of those answers have relied on using bootstrap's push | pull classes, which move things left and right within a row. If we take the advice within those threads and start with the mobile layout above, the full width A.1 section will take up the whole 2nd row on a wide layout, at which point shifting things right and left doesn't do any good, excepting hiding those items off screen.

Q: Is there anyway to shift an item vertically depending on the screen size?

Demo in jsFiddle | StackSnippets

<!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css -->

.a, .b {  border: 1px solid lightgrey;}
.a { color: green;}
.b { color: blue;}

<!-- language: lang-html -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col col-sm-6 a">Section A</div>
    <div class="col col-xs-12 a">More Info about Section A</div>
    <div class="col col-sm-6 b">Section B</div>
  </div>
</div>

<!-- end snippet -->

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

<div class="container">
  <div class="row flex-container">
    <div id="sectionA" class="col col-sm-12 col-md-6 a">Section A</div>
    <div id="sectionAInfo" class="col col-xs-12 a">More Info about Section A</div>
    <div id="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