Как сверстать карточку товара?

Question

[Дмитрий Щ]

Добрый день, как можно сверстать адаптивную карточку товара, желательно на flexbox.
Интересует именно перестроение карточки с десктопа на планшетную версию (как разметить сетку) мелкие элементы понятны.

Пример макета

1170px

768px

481px
Заголовок и описание товара с ценой уходит под фото

Вот то что у меня получилось на данный момент
Песочница

Comments

[Владислав Лысков]

ну шо, ребят, кто быстрее сверстает ему карточку товара?

[Дмитрий Щ]

Владислав Лысков, интересует перестроение сетки блока

spoiler

[Дмитрий Щ]

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

[Максим]

Владислав Лысков, ну вот такой слайдер бы узнать название ...а вёрстка простая здесь

[Дмитрий Щ]

toxic-toster, получается как на макете 768px не получится расположить?

пример

[Дмитрий Щ]

toxic-toster, я для этого и создал вопрос, потому что мне не понятно как сделать планшетную версию по макету.
Расположить блоки друг под другом на планшете (как в Вашей версии) это действительно несложно.

я никогда не понимал, неужели флексы это настолько сложно?

Если флексбоксы это не сложно, то как сделать на них в точности как на макете?

Answer 1

[wqertAnna]

https://codepen.io/anon/pen/WqgrPK

Comments

[Дмитрий Щ]

Спасибо, но получается как на макете 768 не получится расположить фото-описание на 50%

spoiler