[CryKorg]

Доброго времени суток, уважаемые форумчане!

Есть у меня проблема, которую, как мне кажется, можно решить легко, но я уже слишком погрузился и не вижу очевидного, поэтому прошу совета у вас.

Есть у меня макет, положил в миниатюры. Суть его в том, что материалы в нем бесконечные, будут подгружаться, но это другая песня.

Сверстаны они вот так:

<div class="section group">

    <div class="col span_1_of_3">
        <div class="postbox">
            Пост номер один
        </div>
        <div class="postbox">
            Пост номер четыре
        </div>
    </div><!-- Closing tag: .col-->

    <div class="col span_1_of_3">
        <div class="postbox">
            Пост номер два
        </div>
        <div class="postbox">
            Пост номер пять
        </div>
    </div><!-- Closing tag: .col-->

    <div class="col span_1_of_3">
        <div class="postbox">
            Пост номер три
        </div>
        <div class="postbox">
            Пост номер шесть
        </div>
    </div><!-- Closing tag: .col-->

</div><!-- Closing tag: .section group-->

Заданы свойства через css (два файла, так что запросы не объединены):

.section{clear:both;margin:0;padding:0;}
.group:before,.group:after{content:"";display:table;}
.group:after{clear:both;}
.group{zoom:1;}
.col{display:block;float:left;margin:1% 0 0 1.6%;}
.col:first-child{margin-left:0;}

@media only screen and (max-width: 480px) {
.col{margin:1% 0;}
}

.span_3_of_3{width:100%;}
.span_2_of_3{width:66.1%;}
.span_1_of_3{width:32.2%;}

@media only screen and (max-width: 480px) {
.span_3_of_3,.span_2_of_3,.span_1_of_3{width:100%;}
}

@media only screen and (max-width: 768px) {
.span_1_of_3{width:100%;}
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
.span_1_of_3{width:49.2%;max-width::400px; }
}

На телефоне они спокойно расходятся в ширину, на планшете в две колонки, но вот с планшетом беда. Сами колонки из трех становятся двумя, но материал из третьей колонки, становится второй и получается, что третья колонка получает многим больше материала, чем первая. (Миниатюра 2)

Думаю вопрос уже все предугадали Как с этим бороться?
У меня в голове пока две версии:
1) Пересмотреть верстку, но идеи пока нет каким образом
2) Перемещать элементы с помощью JS из второго столбца в первый, если их там больше чем половина плюс два. Вроде это возможно, судя по googlопоиску

Так что прошу помощи у вас! Заранее спасибо!