CODEWITHSUNDEEP
htmltwitter-bootstrap-3
user3797911
user3797911

Reputation: 23

Bootstrap 3 columns order after breakpoint

<div class="row">
  <div class="red col-lg-4"></div>
  <div class="green col-lg-4"></div>
  <div class="blue col-lg-4"></div>
</div>

It is possible to make column orders after breakpoint like this?

enter image description here

Upvotes: 0

Views: 352

Answers (2)

j08691
j08691

Reputation: 207901

You'd need to re-order your divs so that you desinged the layout with the smaller version first, and then using the pull and push CSS classes, move things around. This would work:

<div class="row">
   <div class="red col-lg-4 col-md-6">r</div>
   <div class="blue col-lg-4 col-lg-push-4 col-md-6">b</div>
   <div class="green col-lg-4 col-lg-pull-4 col-md-12">g</div>
</div>

bootply example

And depending on how low you want to go, you could extend the above to:

<div class="row">
   <div class="red col-lg-4 col-md-6 col-sm-6 col-xs-6">r</div>
   <div class="blue col-lg-4 col-lg-push-4 col-md-6 col-sm-6 col-xs-6">b</div>
   <div class="green col-lg-4 col-lg-pull-4 col-md-12 col-sm-12 col-xs-12">g</div>
</div>

to get the same layout on the smallest screens.

Upvotes: 3

VeeeneX
VeeeneX

Reputation: 1578

Try this you need to know your breakpoint

<div class="row">
  <div class="red col-sm-6 col-lg-4">AAAAAAAAAAAAAAAAAAAAAAA</div>
  <div class="green col-sm-6 col-lg-4">AAAAAAAAAAAAAAA</div>
  <div class="blue col-sm-12 col-lg-4">AAAAAAAAAAAA</div>
</div>

This code will 'broke' at 750px width of container. Fiddle link: http://jsfiddle.net/7cP2Y/

Upvotes: -1

Related Questions