Как поменять очередность колонок в wpbakery page builder в мобильной версии?

Question

[KrsnW]

Нужна помощь.
У меня на сайте 2 колонки, на компьютере они расположены горизонтально.
В мобильной версии они располагаются вертикально, одна над другой.
Надо сделать так, чтобы в мобильной версии сайта, правая колонка располагалась НАД левой(по умолчанию она под ней).
Возможно это сделать по средствам wpbakery page builder, чтобы не пришлось лезть в код, т.к не шарю в этом?

Answer 1

[Орхан Гасанлы]

Как простой вариант, возможно, не самая лучшая идея, можно поступить следующим образом:

Дублировать весь ряд. Первый ряд использовать только для отображения в декстопе (соответственно, скрыть на мобайле), второй ряд скрыть в десктоме (соответственно, показать в мобайле). А в мобильной версии изменить порядок отображения колонок и колонки он будет отображаться, как вы хотите.

В бутстрапе это можно решить простым способом добавив нужный класс.

Comments

[KrsnW]

Спасибо за отличную идею! наверное для начала так и поступлю.
Подскажите пожалуйста, а как добавить нужный класс, чтобы всё было по уму?

[Орхан Гасанлы]

KrsnW, Здравствуйте. Если речь идет о бутсрапе, то обратите внимание на *-push *-pull

Информация - https://scotch.io/tutorials/reorder-css-columns-us...
В самом композере насколько мне известно, этого нет

Answer 2

[KrsnW]

Методом тыка, так как сайт делал не я, а рабочие блоки уже были, нашел решение. Надо в настройках ряда, в графе "Дополнительный CSS класс" прописать "md-reverse" тогда на мобильной версии всё корректно отображается

Answer 3

[Ivan Gvrl]

Есть официальное решение.

Нужно задавать колонкам классы vc_col-sm-push-* и vc_col-sm-pull-*,
где * - это количество столбцов сетки ( */12).

К примеру, класс vc_col-sm-push-6 ставим в первый столбец, во второй столбец класс vc_col-sm-pull-6.

Это приём меняет колонки местами в десктопной версии. Поэтому делаем в админке сразу как хотим чтобы было в мобильной версии, накидываем эти классы, и они меняют столбцы на десктопной версии, на мобильной отключаются.