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
Best Answer
You may not have to duplicate all elements, just the ones you want to hide/show. Something along the lines of:
See fiddle