Хитрые колонки. Планшетофобия или поиск идеала
 

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

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

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

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

<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опоиску :)

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

Чё надо-то? Всегда держать три колонки? Или при небольшой ширине уменьшать до двух?
Вашу актуальную цсс-ку "фф топку"! Куча мала намешана какая-то. Да ещё и с синтаксической ошибкой (последнее "max-width" с двумя двоеточиями - проверьте).
P.S. А ещё именование классов позабавило! Обзывать класс несоответствующим названием тэга - это прям по Чакноррисовски! А такого до кучи в вёрстке нет:

<span class="div_1_of_3"></span>

? )))))

Тут ты ошибаешься. В данном случае класс span не имеет отношения к тегу <span>. Это английское слово, со своим значением. В качестве этого значение оно и применяется. Используется повсеместно во всяких css-grid'ах. В том же Twitter Bootstrap..

В каком данном случае? Это же бред чистой воды - если кто потом эту вёрстку поддерживать будет? А по поводу бутстрапа - ещё одна маленькая какашка в огород этого ...кхм... нехорошего набора.

Че за тупой вопрос? В данном случае. В случае, который нам дан ТС.В чем бред? Если не дружишь с английским и не имел дел с css-фреймворками, то это какбы твои проблемы.

Хах, ну ты гонишь. То есть ты считаешь что америкосы недостаточно хорошо знают свой язык, раз разработали такое плохое именование?

И почему нехорошего? Я не любитель всяких подобных фреймворков, но считаю что сабж сделал мир немного лучше. Лучше уж видеть приевшийся дизайн, но зато продуманный, чем множество корявых поделок веб-разработчиков с нулевым скиллом дизайна и нежеланием тратить свое время на проработку. Я имею ввиду сайты всяких проектов, посвященным веб-инструментам, всякие админки и прочее прочее, где стали применять бутстрап.

Бутстрап вроде как делался для "достал из коробки, настроил и всё работает" - тут он хорош, правда тяжёл зараза - ну неофитов это не пугает, зато всё кликается, всплывает и т.д.
Так ведь проблема в том, что никто на этом не останавливается. Типа "мы делаем на бутстрапе, но дизайн нам надо свой". Т.е. жлобы такие - на нормальную разработку их жаба давит, а вот "дизайн из коробки" им при этом не по нраву. Я то уже учёный - сразу шлю лесом! Пробовал я пару раз стилизовать этот бутстрап... Содом и Гоморра! Столько стилей надо переопределять, что не знаешь как и подступить - либо костыли через импортанты городить, либо к хренам всё с нуля переписывать. Это только вёрстка. Если начинаются ещё всякие js-ные плюшки - "а тут скроллбарчик другой, здесь окошечко на весь экран" проще сразу плюнуть!
То ли он такой сырой ещё (не продумана возможность отдельного оформления), то ли его подключают изначально через жопу (со всеми плюшками)... Но я зарёкся с ним дело иметь. Тем более инструментов для "быстрого запуска сайта" сейчас навалом, а уж сама вёрстка обычно и яйца выеденного не стоит (чай не майл-рассылку верстать).

Знакомая тема. Сталкивался с таким. Но это не значит что бутстрап плохой. Просто у кого-то произошел бутстрап мозга.