Как перестроить две строки с тремя ячейками в три строки с двумя ячейками?
Верстаю письмо. В десктопной версии должно быть три ячейки с товарами в строке, под ними - еще одна строка с тремя товарами. На мобильном все это должно перестраиваться следующим образом: товары становятся по 2 шт в три строки. Сломала голову, как же такое провернуть в табличной верстке. Верстать НЕ таблицами сердечно прошу не предлагать: в верстке ПИСЕМ такой подход не подойдет.
Нашла только один выход, и весьма корявый: делать еще одну третью строку на десктопе с двумя ячейками, скрывать ее и показывать только на мобилке. На мобилке скрывать третьи ячейки из первых двух строк.
Подскажите, может, существует более оптимальный способ?
Решила вопрос следующим образом:
делаю три отдельные таблицы внутри одной большой. В каждой таблице всего одна строка с одной ячейкой, в ячейке два span со свойством display: block.
Так визуально у нас получается будто бы две строки по 3 ячейки в каждой.
На мобильном через медиа-запросы задаем адаптивность для каждой таблицы (чтобы она занимала 100% ширины) и для каждого span-а такие параметры:
display: inline-block;
width: 130px; (тут ширину можно взять произвольно, просто именно с такой в моем случае на экране мобильного оба блока помещаются в одну строку и не перестраиваются друг под друга).
Плюс задаем нужные нам отступы, что блоки не прилипали друг к другу.
Спасибо всем, кто откликнулся и предложил свои варианты!
Решение интересное, и, возможно, пригодится в будущем, спасибо!
В данной конкретной ситуации не сильно отличается от предложенного мною выше: часть блоков скрывается, другая часть (в данном случае через псевдо-элементы) становится видимой. Когда речь идет о карточках товара, так делать не очень удобно, а с использованием псевдо-элементов и вовсе невозможно, так как речь идет не об одной текстовой строке, а нескольких, плюс картинка и кнопка.
Средний
