re-arange default column (-webkit-column, -moz-column) order on a page?

[mental]

Here is my problem, I have a 3 column design, similar to Pinterest however, I don't like the order in which they are being displayed.See this demo: My Demoas you can see articles are displayed like this\[code\]1 3 52 4 6\[/code\]I would like them to be displayed like this:\[code\]1 2 34 5 6\[/code\]I know I can achieve it by changing markup, but the problem is that all content will be called from database one by one, so article by article and so it need's to be ordered in a same way as it is in markup, just display differently on a page:HTML\[code\]<div class="page-wrap main"> <div class="grid"> <article class="box article"> <header class="clearfix"> 1 </header> </article> <article class="box article"> <header class="clearfix"> 2 </header> </article> <article class="box article"> <header class="clearfix"> 3 </header> </article> <article class="box article"> <header class="clearfix"> 4 </header> </article> <article class="box article"> <header class="clearfix"> 5 </header> </article> <article class="box article"> <header class="clearfix"> 6 </header> </article> </div> <!-- END .grid (Content) --></div> <!-- END .page-wrap (Content) -->\[/code\]CSS\[code\]body { background-color: #ebebeb;}.page-wrap { width: 90%; max-width: 1280px; margin: 0 5%;}.grid { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; -webkit-column-fill: auto; -moz-column-fill: auto; column-fill: auto;}.box { display: inline-block; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid; padding: 1px; width: 100%;}.article { background-color: #ffffff; margin-top: 20px;}\[/code\]