Изменить порядок расположения столбцов по умолчанию (-webkit-column, -moz-column) на странице?

Question

Вот моя проблема, у меня есть дизайн с 3 колонками, похожий на Pinterest, однако мне не нравится порядок, в котором они отображаются.

Посмотреть это демо: My Demo

как вы можете видеть статьи отображаются так

1  3  5
2  4  6

Я хотел бы, чтобы они отображались так:

1  2  3
4  5  6

Я знаю, что могу добиться этого, изменив разметку, но проблема в том, что весь контент будет вызываться из базы данных одна за другой, поэтому статьи за статьей и, следовательно, их нужно упорядочивать так же, как в разметке, просто отображать по-разному на странице:

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

Вы можете сделать это, но вам нужно будет добавить новый класс для каждой статьи. Это не нарушит работу остальной части сайта, так как CSS, который вам нужно добавить, будет вызывать его только на тех страницах, к которым вы хотите применить новый макет. Вот демо-версия 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) -->