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:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-12 visible-xs">1</div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-4">2</div>
        <div class="col-xs-12 col-md-4 col-md-push-4">3</div>
        <div class="col-xs-12 col-md-4 col-md-pull-4">4</div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-12 hidden-xs">1</div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-md-4 col-md-push-4">5</div>
        <div class="col-xs-12 col-md-4 col-md-pull-4">6</div>
        <div class="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:

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

Solution 3:

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

  <div class="row">
    <div class="col-md-12 only-mobile">1</div>
    <div class="col-md-4">2</div>
    <div class="col-md-4 only-mobile">3</div>
    <div class="col-md-4">4</div>
    <div class="col-md-4 no-mobile">6</div>
    <div class="col-md-12 no-mobile">1</div>
    <div class="col-md-4 no-mobile">3</div>
    <div class="col-md-4">5</div>
    <div class="col-md-4 only-mobile">6</div>
    <div class="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;
  }
}