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?