CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Jack Mccourt
Jack Mccourt

Reputation: 11

Bootstrap 3 grid collapse order

Is there a simple way to order the way the columns collapse within bootstrap 3 grids?

This is what I have:

<div class='row'>
<div class='col-sm-8'>
    <div class='box'>
        This will be on the left on large screens but on the bottom on smaller screens.
    </div>
</div>
<div class='col-sm-4'>
    <div class='box'>

    </div>
</div>

Upvotes: 1

Views: 2357

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362700

You would make your mobile (smallest) layout first, and the push/pull for larger sizes..

<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-push-8">
        <div class="box">
            4
        </div>
    </div>
    <div class="col-sm-8 col-sm-pull-4">
        <div class="box">
            This will be on the left on large screens but on the bottom on smaller screens.
        </div>
    </div>
  </div>

Demo: http://www.bootply.com/gH5Ua0iy6i

Upvotes: 4

Related Questions