Bootstrap Push/Pull Issues

Question

I'm fairly new to Bootstrap, and am having issues getting the alignment of elements to change right using push and pull. Here is the desired result for small screen sizes (xs and above):

-------------------
|     Search      |
-------------------
|    Directory    |
-------------------
|   Preferences   |
-------------------

Then for all screens sized md and above, I want this layout:

-------------------
|  Search  | Pref.|
-------------------
|    Directory    |
-------------------

I've read that Bootstrap layouts should be designed mobile-first, so my code is as follows:

.a {
  background-color: green;
}
.b {
  background-color: blue;
}
.c {
  background-color: red;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-7 a">Search</div>
    <div class="col-xs-12 b col-md-push-12">Directory</div>
    <div class="col-xs-12 col-md-5 c col-md-pull-7">Preferences</div>
  </div>
</div>

Here's a Bootply with my code. It works as expected for the small screens, with each div stacked in the correct order, but I can't figure out why push and pull are just moving elements left and right, not joining them as I thought they would (even when I mess with the number of columns to push/pull). Can anyone point me in the right direction?

Answer 1

As has been mentioned, right now, there is no way to do this using only bootstrap classes. push, pull and offset will only shift elements horizontally, not vertically.

However, If you are targeting browsers that have support for it, you can use a combination of flexbox and media queries to achieve this re-ordering without needing to duplicate content.

Support breakdown: http://caniuse.com/#feat=flexbox

First, remove your push and pull classes and wrap your columns in a div.

<div class="container">
  <div class="row">
    <div class="flexBox">
      <div class="a col-xs-12 col-md-7">Search</div>
      <div class="b col-xs-12 ">Directory</div>
      <div class="c col-xs-12 col-md-5">Preferences</div>
    </div>
  </div>
</div>

Second, use some CSS rules to set up the display of the wrapper div.

.flexBox
{
    display:flex;
    flex-wrap:wrap;
}

Lastly, set up a media query which will re-order the elements once the width is above the xs breakpoint (768px)

@media all and ( min-width: 768px ) {
    .flexBox .a { order:1; }
    .flexBox .b { order:3; }
    .flexBox .c { order:2; }
}

Full example below.

.a { background-color:green; }
.b { background-color:blue; }
.c { background-color:red; }

.flexBox {
  display:flex;
  flex-wrap:wrap;
}

@media all and ( min-width: 768px ) {
  .flexBox .a { order:1; }
  .flexBox .b { order:3; }
  .flexBox .c { order:2; }
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="flexBox">
      <div class="a col-xs-12 col-md-7">Search</div>
      <div class="b col-xs-12 ">Directory</div>
      <div class="c col-xs-12 col-md-5">Preferences</div>
    </div>
  </div>
</div>

Answer 2

this can become very confusing... just make a separate div for phone screens if you are reordering the structure on different screens. Use the hidden-(screen-size) in Bootstrap 3. The bootstrap push and pull works horizontally but not vertical realignment (that I know of). Hopefully this is correct below.. I have been using other things now for this and it has been a while.

<div class="container">
  <div class="hidden-sm row">
    <div class="col-xs-12 a">Search</div>
    <div class="col-xs-12 b">Directory</div>
    <div class="col-xs-12 c">Preferences</div>
  </div>
    <div class="hidden-xs row">
    <div class="col-sm-7 a">Search</div>
    <div class="col-sm-5 c">Preferences</div>
    <div class="col-sm-12 b">Directory</div>
  </div>
</div>