re-arange default column (-webkit-column, -moz-col

Question

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 Demo

as you can see articles are displayed like this

1  3  5
2  4  6

I would like them to be displayed like this:

1  2  3
4  5  6

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

<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) -->

CSS

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;
}

Answer 1

You can do it but you will have to add a new class to each article. This will not disrupt the rest of the website as the CSS you need to add you will only call it to the pages you want the new layout to apply to. Heres a demo http://jsfiddle.net/kevinPHPkevin/LZgtA/

<div class="page-wrap main">

<div class="grid">

    <article class="box article one">
        <header class="clearfix">
                1
        </header>
    </article>

    <article class="box article two">
        <header class="clearfix">
                2
        </header>
    </article>

    <article class="box article three">
        <header class="clearfix">
                3
        </header>
    </article>

    <article class="box article four">
        <header class="clearfix">
                4
        </header>
    </article>

    <article class="box article five">
        <header class="clearfix">
                5
        </header>
    </article>

    <article class="box article six">
        <header class="clearfix">
                6
        </header>
    </article>

</div> <!-- END .grid  (Content) -->