Как поменять блоки местами используя только CSS?

Question

[Петр Волханов]

Как мне поменять блоки местами используя только CSS? На этой странице, это карточка товара магазина на opencart. Вот как нужно поставить блоки:



Картинка станет справа, под ней будет располагаться информация с ценой и кнопка добавить в корзину. А на одном уровне с картинкой (слева) будет расположено описание. Как так расположить элементы?

UPD: Ставлю классам left и right position:absolute и они вообще исчезают.

Answer 1

[Василий П]

Ну если Вы хотите через position: absolute, тогда у родителя (обертки например) должен быть задан position: relative. После этого уже можно будет их как-то координировать через top, left, right, bottom. А вообще одним css тут вряд ли обойдешься.

Или еще вариант :


.product-info.split-30-70 .left {
width: 30%;
float: right;
}

.product-info > div {
width: 50%;
float: left;
}

.product-info.split-30-70 .right {
width: 100%;
clear: both;
}

А там уже играйся с блоками

Answer 2

[Алексей Сол]

.product-info {
  display: flex;
  flex-direction: row-reverse;
}

Таким образом, вы задаёте тип родительского блока как флекс и меняете расположение элементов по главной оси (по умолчанию, это row).

Comments

[Петр Волханов]

Алексей Сол Не совсем уловил суть, я задал .product-info { display: flex; flex-direction: row-reverse; }. Теперь я задаю картинке и блоку с ценой какие свойства CSS?

Answer 3

[Ankhena]

Используйте flex и и меняйте свойство order в зависимости от ширины экрана с помощью media
https://html5book.ru/css3-flexbox/#order