问题
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.
回答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.
回答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.
回答3:
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
来源：https://stackoverflow.com/questions/29496846/change-column-order-using-bootstrap-push-and-pull