Reverse grid arrangment?

Question

I have a sidebar on the right and content on the left:

<div class="col-md-9">
  <p>Main. At large zoom -- currently it goes to top. I want it to go to the bottom.</p>
</div>

<div class="col-md-3">
  <p>Sidebar. At large zoom -- currently it goes to bottom. I want it to go to the top.</p>
</div>

I want the sidebar to go up at large zoom (e.g. on a phone). But bootstrap sends it to the bottom: http://www.bootply.com/nqOuCvbXZR

Bootstrap 3 docs use the same layout and suffer from the same issue: for example see http://getbootstrap.com/css

Is it possible to modify bootstrap default arrangement rules?

score 1 · Accepted Answer · edited Jan 13 '15 at 15:26

Think mobile first. Put the column that on mobile will go up first. And use pull and push for larger screens.

<div class="col-xs-12 col-md-push-9 col-md-3">
  <p>Sidebar. At large zoom -- currently it goes to bottom. I want it to go to the top.</p>
</div>

<div class="col-xs-12 col-md-pull-3 col-md-9">
  <p>Main. At large zoom -- currently it goes to top. I want it to go to the bottom.</p>
</div>

Reverse grid arrangment?

1 Answers1

Linked