CODEWITHSUNDEEP
twitter-bootstrap-3
Adobe
Adobe

Reputation: 13487

Reverse grid arrangment?

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?

Upvotes: 2

Views: 216

Answers (1)

tmg
tmg

Reputation: 20403

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>

Upvotes: 1

Related Questions