Как заверстать таблицу, чтобы легко можно было её заадаптивить?

Question

[Сергей]

Надо сверстать эту таблицу и чтобы на мобилках смотрелось по другому. Примерно так:


Или же рассмотрю другие варианты отображения. Главное, чтобы это адекватно отображалось и не сильно заморочено было. Через

Comments

[Максим Тимофеев]

а почему Вы везде добавляете приставку "за"?

заверстать, заадаптивить

Эта приставка с глаголами в русском языке, в безударной позиции при добавлении к основе глагола образует глагол со значением "начать выполнять соответствующее действие"

Вы не планируете сделать, Вы планируете начать верстку и адаптацию и бросить?

[Ольга Ветер]

Максим Тимофеев, за--|колебать (занудством) - вполне законченное действие.

[Максим Тимофеев]

Ольга Ветер, раз уж пошел разговор про занудство:
https://dic.academic.ru/dic.nsf/ushakov/806038
Это совершенное действие, означающее начало. Грубо говоря Вы закончили начинать колебать.

[Ольга Ветер]

Максим Тимофеев, совершенный вид глагола указывает на завершенное действие.
Закончили начинать - это сильно. Вы сделали мой день.

[Ankhena]

Я бы сделала это табами. Тогда не будет дублирования контента. Но будут 2 вкладки.
Примерно так: https://jsfiddle.net/n6zvbpyq/
Дальше самостоятельно раскрасьте.

Answer 1

[Никита]

Можно названия полей поместить прямо в ячейку и через медиа отображать только на мобильных устройствах.

Answer 2

[Виталий Питаленко]

Можно сделать 2 блока - один под мобилки, второй под дэсктопы и при помощи медиа скрывать и отображать.

Comments

[Сергей]

А в админке 2 раза дублировать придется?

[Виталий Питаленко]

Ну если не хочется менять информацию дважды можешь написать js обработчик который из одной таблицы будет брать инфу и засовывать в другую.

Answer 3

[Bondi]

Можно все заверстать списком с вложенными span'ами в тег li. В одни span поместить иконки, в другие информацию.
Например:

<ul>
     <li> <span> icon </span> <span> Lorem ipsum 591 </span> </li>
</ul>

на li повесить flex и на определенном разрешении через свойство order у span, менять их расположение внутри родителя

Comments

[Сергей]

Все 3 блока в 1 ul?

[Bondi]

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