How to reorder bootstrap columns vertically

user_1366033 0
Viewed 3422

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

|  Small       |   Large            |
|--------------|--------------------|
| [A         ] | [A      ][B      ] |
| [A.1       ] | [A.1             ] |
| [B         ] |                    |

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

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.

Example

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

Demo in jsFiddle | StackSnippets

.a, .b {  border: 1px solid lightgrey;}
.a { color: green;}
.b { color: blue;}
<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>

grid-layout twitter-bootstrap-3 twitter-bootstrap css html
1 Answers

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

user_85326560
Related