convert divs displaying as row to divs displaying as column
- by C-Link
I have as the following divs. Suppose each div is floated left or set display to inline-block.
+-----------+ +-----------+ +--------------+
| 1 | | 2 | | |
+-----------+ | | | 3 |
+-----------+ | |
+--------------+
+-----------+ +-----------+ +--------------+
| 4 | | 5 | | |
+-----------+ | | | 6 |
+-----------+ | |
+--------------+
+-----------+ +-----------+ +--------------+
| | | 8 | | 9 |
| 7 | +-----------+ | |
| | +--------------+
| |
+-----------+
I want to achieve like this
+-------------+ +-----------+ +-------------+
| 1 | | 4 | | |
+-------------+ +-----------+ | 7 |
+-------------+ +-----------+ | |
| 2 | | 5 | | |
| | | | +-------------+
+-------------+ +-----------+ +-------------+
+-------------+ +-----------+ | 8 |
| | | | +-------------+
| 3 | | 6 + +-------------+
| | | | | 9 |
| | +-----------+ | |
+-------------+ +-------------+
I know I can do this by column-wise as this
<div class="col1">
<div></div>
<div></div>
<div></div>
</div>
<div class="col2">
<div></div>
<div></div>
<div></div>
</div>
<div class="col3">
<div></div>
<div></div>
<div></div>
</div>
But In my website there more pages like this, so I would like to achieve without touching markup. Is there any idea to perform this with css or any javascript/jquery method?
