Как поменять расположение блоков в opencart (мобильная версия)?

Question

[Vardensky]

Сразу прошу не расценивать как рекламу. Есть сайт. Нужно чтобы в мобильной версии блок с ценой и кнопками: купить, быстрый заказ, шли сразу после фото товара. Т.е поменять их расположение только в мобилньной версии. Сначала идет фото, и потом все эти кнопки.

Пытался юзать

.col-*-pull-*
.col-*-push-*

Но безрезультатно. Все вообще перекашивается даже в декстопной версии.

Answer 1

[iBird Rose]

все верно. делается через

.col-*-pull-*
.col-*-push-*

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

Comments

[Vardensky]

Т.е, менять блоки местами надо по-любому в декстопе? Непосредственно в мобильную версию не получится изменения внести? Может через CSS как-то.

[iBird Rose]

Vardensky, если в мобильной версии ты хочешь видеть блок первым - тебе в любом случае его изначально первым и нужно поставить

Answer 2

[Vardensky]

В общем, решил посредством костылей) Хз понадобится кому это или нет. И так:
Необходимо продублировать нужные блоки (в моем случае это 2 кнопки)

<button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary btn-lg btn-block"><?php echo $button_cart; ?></button>

И добавить ей любой класс .deesktop например. Продублировал её сразу после картинки товара. Потом переходим в медиа и ищем разрешение 768px (или какое вам нужно). На декстопе прописываем:

.desktop {
 visability: hidden;
}

Ну и может еще что-то чтобы не было криво и все выглядело красиво. Собственно и всё. Теперь на декстопной версии продублированная нами кнопка не видна, но зато когда мы переходим в мобильную видна кнопка которая сверху и которая снизу. Т.е видны обе кнопки. Можно допилить и сделать чтобы скрывалась и нижняя, но воля заказчика иная..