Можно ли в моб версии перенести элемент выше?

Question

[Валентина]

На сайте wordpress + woocomerce в карточке товара

Исходное: кнопка в корзину под коротким описанием.

Нужно: чтобы в моб версии она была над коротким описанием сразу под ценой.

Как сделать?

Answer 1

[Lam Besis]

2018 год, не слушайте людей которые советуют дублировать элементы, или того хуже, использовать absolute.
У флексов есть отличная вещь - order, и с этим свойством задача решается в три строчки: линк на codepen.

Comments

[webhero]

Согласен, но если дизайнер нарисовал этот элемент вообще вне флекс-контейнера. очень часто такое бывает.

Answer 2

[Кирилл]

Либо position absolute через media либо создавать 2 элемента видимых на фулскрин/мобильных

Comments

[Валентина]

а как создать 2 элемента?

если так, то выводиться с теме же стилями кнопка, уже не скрыть
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 10 );

[Кирилл]

Валентина, через media в css задайте position absolute для кнопки и располагайте как захотите