Как сверстать адаптивную табличку на флексах?

Question

[Michey]

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



Может кто сталкивался с подобным.

Comments

[KotovDenis]

https://habr.com/ru/post/320022/ Возможно вам поможет, по факту таблицу родитель делаете флексом, дети - флекс элементы, и там можно вертеть как хотите через css media. В крайнем случае тоже самое можно сделать на гридах, еще легче, используя grid area

[alex]

нормально таблицу только через table можно сделать. ни гриды ни флексы, только table. можно эмулировать на дивах с display: table, тогда при адаптиве переключаете на display block/flex/grid и позиционируете как надо

Answer 1

[alex-1917]

на примере цены и кнопки "удалить":
это вложенная в ячейку таблица об одной строке и двух ячейках.
Для мобильных делайте для ячеек этой таблицы дисплей-блок и ячейки встанут друг над другом.
Остальные элементы аналогично