Change column order using bootstrap push and pull

Question

I have 3 columns in the following order:

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row">
    <div class="col-sm-3">left column</div>
    <div class="col-sm-6">center column</div>
    <div class="col-sm-3">right column</div>
  </div>
</div>

And I want to re-order with push and pull. I need the center column on the top, and the others column with a size of 6.

Answer 1

Because bootstrap-3 is designed as "mobile first", you should rethink how your columns are setup. You should design with how you want it to look on mobile... well, first, and then make push/pull adjustments (or any others) as the screen gets bigger.

So:

  <div class="row">
    <div class="col-sm-6 bg-info col-sm-push-3">center column</div>
    <div class="col-sm-3 bg-success col-sm-pull-6">left column</div>
    <div class="col-sm-3 bg-danger">right column</div>
  </div>

You haven't specified how you want them to react when on other devices, but this should get you started.

Answer 2

I found a great answer that it may be useful to you Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3

Bootstrap is a "mobile first" framework, so your HTML should reflect the mobile version of your site. The Pushing and Pulling are then done on the larger screens.