Re-ordering bootstrap columns on desktop and mobile views

Question

Basically, I want a certain column (search) on the right sidebar to be on top when on mobile devices and still maintain the right sidebar on desktop views.

So here's what I have so far..

<div class="container">
    <div class="col-md-3 col-md-push-9">B</div>
    <div class="col-md-9 content col-md-pull-3">A</div>
    <div class="col-md-3 col-md-push-9">C</div>
</div>

It looks like this on mobile (which is what I want)

| B |
| A |
| C |

However, on desktop, it looks like this (there's a gap between B and C which I don't want)

| A | B |
| A |   |
|   | C |

Here's how it looks: http://www.codeply.com/go/guzmu84ybo

Any ideas?

It doesn't look like the second structure in Bootply: http://www.bootply.com/5v9bsQfwQg — m4n0, May 24 '15 at 03:24
Sorry, didn't realize I need to sign up to save the code snippet. Here you go, http://www.codeply.com/go/guzmu84ybo — gerky, May 24 '15 at 03:50

score 2 · Answer 1 · edited May 23 '17 at 11:58

Working Codeply Solution

Though flexbox might be the most modern approach to this flow issue, some may be looking for a simple 'Bootstrappy' solution or for a solution that will work in IE10+. A single media query will solve your issue and you can remove all the push/pull classes. You can simplify your markup to:

<div class="container">
    <div class="row">
        <div id="searchWrap" class="col-md-3">B</div>
        <div class="col-md-9 content">
            <p>Lorem Ipsum... This content can be long now... </p>
        </div>
        <div class="col-md-3">C</div>
    </div>
</div>

Then this single media query is needed in your CSS to effectively 'reset' the left property that was causing all your issues:

@media (min-width : 992px) { 
    #searchWrap { 
        float: right;
        left: 0px; 
    }
}

You can change the 992px to whatever width you'd like the search to flow to the top at. But 992px is the width in Bootstrap 3's grid for 'tablet width' and is most likely the appropriate width for this re-flow to happen. (See all the Bootstrap 3 grid widths here.)

score 1 · Accepted Answer · answered May 24 '15 at 06:57

Try rearranging the structure and using the flexbox concept to reorder the columns in mobile devices:

HTML

<div class="container">
  <div class="col-md-9 one">
    <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
    <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
  </div>
  <div class="col-md-3 two">B</div>
  <div class="col-md-3 three">C</div>
</div>

CSS

@media (max-width: 991px) {
  .container {
    display: flex;
    flex-direction: column;
  }

  .one {
    order: 2;
  }

  .two {
    order: 1;
  }

  .three {
    order: 3;
  }
}

CodePly

awesome! exactly what I was looking for. I chose this over the other one because it seems more flexible. — gerky, May 24 '15 at 10:15

Re-ordering bootstrap columns on desktop and mobile views

2 Answers2