3

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.

Idan Adar
  • 44,156
  • 13
  • 50
  • 89
manupi26
  • 141
  • 9

3 Answers3

2

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.

Shawn Taylor
  • 15,590
  • 4
  • 32
  • 39
1

If you don't have much content in these, you can always cheat and just define two sections, one for the smaller screen, and one for bigger screens, like this:

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row hidden-sm">
    <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 class="row visible-sm">
    <div class="col-sm-12">center column</div>
    <div class="col-sm-6">left column</div>
    <div class="col-sm-6">right column</div>
  </div>
</div>

http://www.bootply.com/dUD8yYL0YP

ganders
  • 7,285
  • 17
  • 66
  • 114
1

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.

Community
  • 1
  • 1
mjimcua
  • 2,781
  • 3
  • 27
  • 47