Bootstrap grid pull/push rows

Question

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     |
--------------
|      3     |
--------------
|      4     |
--------------
|      5     |
--------------
|      6     |
--------------
|      7     |
--------------

md or higher:

-------------
| 2 | 4 | 6 |
-------------
|     1     |
-------------
| 3 | 5 | 7 |
-------------

My problem is that col-pull and col-push only moves the column to the sides, not up and down.

This is what I have so far:

  <div class="row">
    <div class="col-md-12">1</div>
    <div class="col-md-4">2</div>
    <div class="col-md-4 col-md-push-4">3</div>
    <div class="col-md-4 col-md-pull-4">4</div>
    <div class="col-md-4 col-md-push-4">5</div>
    <div class="col-md-4 col-md-pull-4">6</div>
    <div class="col-md-4">7</div>
  </div>

, which displays correctly in small displays but on big ones it displays as the following:

-------------
|     1     |
-------------
| 2 | 4 | 3 |
-------------
| 6 | 5 | 7 |
-------------

I would need to swap first and second rows, and swap the column 3 with column 6. How can I achieve this?

Thank you very much

Answer 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