Как менять колонки в Bootstrap?

Question

[Михаил Завалко]

Привет всем! Такой вопрос стоит передо мной, приблизительно победил перенос колонок в плане порядка классами push и pull, только теперь вопрос почему при разной высоте блоков они расположены как бы в строках, а не один под одним, и как можно это решить?

--------
| 2 | 1 |
    | 4 |
| 5 |
| 6 | 3 |
--------

Вот тут к примеру 3 блок не поднимается вверх к 4 му, а 5й ко 2му.
Собственно как должны быть сложены вот тут: jsfiddle.net/k39tyard

Comments

[spike__x]

При каком height они так встают у вас?

[Михаил Завалко]

spike__x, у всех то height разный

Answer 1

[Михаил Завалко]

Расскажу какой костыль вставил, вдруг кому пригодится, хотя как говорят с Bootstrap 4 этой проблемы уже нет, но мало ли. В общем просто отдельно сделал 2 копии одних блоков, расположил в нужном порядке для мобильной и десктопной версии и скрыл от мобильной одну и показал другую и наоборот. jsfiddle.net/k39tyard/1

Comments

[Сергей]

про сео можно забыть )

Answer 2

[Сергей]

Из-за разной высоты блоков так и ведет себя код, все правильно.
Решение - использовать бутсрап 4, там все ок на флексах работает и не надо никаие пушы и пулы делать, указал порядок блоков и радуешься.
- можно использовать плагин brm.io/jquery-match-height который будет задавать одинаковую высоту блоков в строке.

Comments

[Михаил Завалко]

Неужели ничего не придумать со старым решением?! Просто это Open Cart и там Bootstrap уже подключен 2.3.0.2 . Странно что в главе Responsive column resets документации по Bootstrap https://getbootstrap.com/docs/3.3/css/#grid-respon... При складывании до размеров xs так же и происходит, но если залезть в html и удалить див с классом clearfix, то ведет себя все это дело в принципе как надо. Единственное что у меня поведение блоков будто этот clearfix у меня есть тоже, хотя это не так.