CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
jleeothon
jleeothon

Reputation: 3146

Order of rows/columns with pull/push/offset in Bootstrap

This question is for Twitter Bootstrap 3. I have three columns whose order and size I want to be different depending on the screen size.

On md:

----------------
|1   |2   |3   |
----------------

On sm:

----------------
|1      |3     |
----------------
|2             |
----------------

I think I should play around with pulls/pushes with the second and third col elements but I can't get it right yet...

I know this doesn't work, but so far it looks like...

<div class="row">
  <div class="col-sm-6 col-md-4 form-group">
    ...
  </div>
  <div class="col-sm-12 col-sm-push-6 col-md-4 form-group">
    ...
  </div>
  <div class="col-sm-6 col-sm-pull-6 col-md-4 form-group">
    ...
  </div>
</div>

Upvotes: 1

Views: 3958

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25475

How does this look? Live view

<div class="row">
  <div class="col-sm-6 col-md-4 form-group">
    1
  </div>
  <div class="col-sm-6  col-md-4 col-md-push-4 form-group">
    3
  </div>
  <div class="col-sm-12 col-md-4 col-md-pull-4 form-group">
    2
  </div>

</div>

Hope this helps!

Upvotes: 6

Related Questions