Bootstrap Grid Pull/push Rows

I have a responsive bootstrap grid which I want to be shown in a different order depending on the device width. sm or lower: -------------- | 1 | -------------- | 2

Solution 1:

You may not have to duplicate all elements, just the ones you want to hide/show. Something along the lines of:

<divclass="container-fluid"><divclass="row"><divclass="col-xs-12 col-md-12 visible-xs">1</div></div><divclass="row"><divclass="col-xs-12 col-md-4">2</div><divclass="col-xs-12 col-md-4 col-md-push-4">3</div><divclass="col-xs-12 col-md-4 col-md-pull-4">4</div></div><divclass="row"><divclass="col-xs-12 col-md-12 hidden-xs">1</div></div><divclass="row"><divclass="col-xs-12 col-md-4 col-md-push-4">5</div><divclass="col-xs-12 col-md-4 col-md-pull-4">6</div><divclass="col-xs-12 col-md-4">7</div></div></div>

See fiddle

Solution 2:

I know this is cheating, and duplicates your html markup, but here's how I handle these:

<divclass="col-xs-visible"><!-- Your mobile version here --><divclass="row"><divclass="col-xs-12">1</div><divclass="col-xs-12">2</div><divclass="col-xs-12">3</div><divclass="col-xs-12">4</div><divclass="col-xs-12">5</div><divclass="col-xs-12">6</div><divclass="col-xs-12">7</div></div></div><divclass="col-xs-hidden"><!-- Your non-mobile version here --><divclass="row"><divclass="col-sm-4">2</div><divclass="col-sm-4">4</div><divclass="col-sm-4">6</div><divclass="col-sm-12">1</div><divclass="col-sm-4">3</div><divclass="col-sm-4">5</div><divclass="col-sm-4">7</div></div></div>

Solution 3:

Combining the given answers, I found my way around this with this code:

<divclass="row"><divclass="col-md-12 only-mobile">1</div><divclass="col-md-4">2</div><divclass="col-md-4 only-mobile">3</div><divclass="col-md-4">4</div><divclass="col-md-4 no-mobile">6</div><divclass="col-md-12 no-mobile">1</div><divclass="col-md-4 no-mobile">3</div><divclass="col-md-4">5</div><divclass="col-md-4 only-mobile">6</div><divclass="col-md-4">7</div></div>

CSS:

.no-mobile{
  display: block;
}
.only-mobile{
  display: none;
}
@media screen and (max-width:992px){
  .no-mobile{
    display: none;
  }
  .only-mobile{
    display: block;
  }
}