Как переместить колонки с одной строки в другую с помощью bootstrap?

Question

[BohdanK]

Есть следующий код: jsfiddle.net/akrhF/49
К примеру нужно переместить 5-ю плитку на 4-е место, а 4-ю на 5-е. Когда я прописываю col-sm-push-3 для 4-й плитки и col-sm-pull-3 для 5-й, то они просто уезжают: jsfiddle.net/akrhF/51

Хочу подчеркнуть что если менять колонки местами в пределах одной строки (4-х плиток), то все работает.

Может быть так вообще делать нельзя? В документации указано что pull - push применяется для изменения порядка колонок в row, а в какой row не понятно, в контейнере с классом row или просто в пределах одной строки (то есть в пределах col-xs/sm/md/lg-12). Склоняюсь уже к тому что придется DOM скриптами перестраивать.

Comments

[Оптимус Пьян]

Посмотрел ваш пример на jsfiddle отображается абсолютно идеинтично, не заметил что что-то куда-то уезжает

Answer 1

[Владислав Безенсон]

Возможно вам просто стоит учесть то, что когда вы пишите col-sm-push-3, то ваша колонка сдвинется на три колонки вправо начиная С первого брейкопинта (по-умолчанию в бутстрапе sm - это 768px) и ДО бесконечности. Если вы меняете ширину колонок на каждом брейкпоинте, то и классы "pull" и "push" вам нужно указывать для каждого брейкпоинта.
---
Если вы загляните в код, то бутстрап перемещает колонки между собой с помощью position: relative. А именно, когда вы пишете push-2, то колонка сдвигается относительно своего положения на две колонки вправо. pull-2 же свдигает на две колонки влево. Колонки находящиеся в разных рядах отсортированы стандартными средствами BS быть не могут.

Comments

[BohdanK]

Я понимаю что нужно указывать для каждого, но в данный момент мне нужно только для SM, для MD и LG укажу позже. Если сейчас укажу то все равно влияния никакого не будет.

[BohdanK]

Владислав Безенсон: Вот, теперь ясно, спасибо, буду тогда перестраивать DOM скриптами.