4

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>
KyleMit
  • 30,350
  • 66
  • 462
  • 664
  • Which bootstrap version are you using? – Jordi Vicens Nov 08 '17 at 18:12
  • I have not so much time, but in bootstrap v4, it has a class called order-x and also you can use it with resolutions, (order-md-X). If it exist on bootstrap 3 it will hleps you. If not, you can use it directly the property via css, also called order:x; – Jordi Vicens Nov 08 '17 at 18:17
  • How do you want it to look on large screens? I don't follow. – Serg Chernata Nov 08 '17 at 18:41
  • @SergChernata, really? I want it to look like exactly how I described in the first section and then elaborated with a screenshot and arrows. Where are you not following. There are two examples of what I want it to look like and another of what it currently looks like. – KyleMit Nov 08 '17 at 19:05
  • @KyleMit I see now, is there a lot of content in these sections or are they small? – Serg Chernata Nov 08 '17 at 19:09
  • @SergChernata, this is a simplified example for the purpose of demoing with minimal code. There is a far amount of content in each section, in my real world scenario, but it shouldn't change the underlying structure and mechanics of repositioning the parent level divs – KyleMit Nov 08 '17 at 19:13
  • Imo there are 2 choices but I don't want to write it up if you're not interested: absolute positioning for large screens or using bootstrap's classes to hide and show duplicate section B div. – Serg Chernata Nov 08 '17 at 19:15

1 Answers1

3

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

TidyDev
  • 3,470
  • 9
  • 29
  • 51