1

I've got a two column page:

<div class="col-md-5">
    ...
</div>

<div class="col-md-7">
    ...
</div>

On desktop and tablet screens, the first div appears to the left of the second div, as we would expect. On smaller screens, the first div appears on-top of the second div, again, as we would expect. What I'm wondering is.... Is it possible, on smaller screens, to flip the order of these two so that the second div appears on top of the first?

Casey Crookston
  • 13,016
  • 24
  • 107
  • 193
  • 2
    Very similar to this question. Check it out. http://stackoverflow.com/questions/20171408/how-do-i-change-bootstrap-3-column-order-on-mobile-layout – Brino Jun 25 '15 at 13:53
  • Thanks! Perfect! If you want to put that as an answer, I'll mark it as correct. – Casey Crookston Jun 25 '15 at 13:58

1 Answers1

2

Sure! This is built into Bootstrap version 3, with classes like col-[size]-push-[cols], as in the column ordering section of Bootstrap's documentation

Demonstration in this fiddle, using the below code based on Bootstrap's example.

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-9 col-sm-push-3">First on mobile, second on desktop</div>
      <div class="col-sm-3 col-sm-pull-9">Second on mobile, first on desktop</div>
    </div>
</div>
sqsinger
  • 500
  • 1
  • 3
  • 13