Как изменить таблицу HTML для мобильной версии?

Question

[nivaech]

Пишу html-страницу для email-рассылки. Нужно ее оптимизировать под outlook, из-за чего media queries и все смежное отпадает, нужно искать альтрнативные методы.

Блок выглядит вот так:

В мобильном виде два столбца должны становиться двумя рядами:


Вот так вот выглядит этот блок - одна клетка с картинкой карты, и вторая - с информацией.

<tr>
                                    <td style="padding-bottom: 48px">
                                        <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
                                            <tr>
                                                <td class="map-container">
                                                    <img style="border-radius: 8px" src="map-image.png">
                                                </td>
                                                <td class="address-container">
                                                    <table cellpadding="0" cellspacing="0" border="0" style="width: 100%;">
                                                        <tr>
                                                            <td>
                                                                <img src=""
                                                                    width="16px" height="16px" />
                                                            </td>
                                                            <td class="event-summary-label-container">
                                                                <span class="event-summary-label">Apr, 16</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <img src=""
                                                                    width="16px" height="16px" />
                                                            </td>
                                                            <td class="event-summary-label-container">
                                                                <span class="event-summary-label">7:30 PM - 9:30
                                                                    PM</span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td style="padding-bottom: 20px">
                                                                <img src=""
                                                                    width="16px" height="16px" />
                                                            </td>
                                                            <td class="event-summary-label-container">
                                                                <span class="event-summary-label">St. Denis
                                                                    Theatre</span>
                                                                <br>
                                                                <a class="link-small" target="_blank"
                                                                    target="_blank"
                                                                    href="">1594
                                                                    Rue Saint-Denis, Montreal</a>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <img src=""
                                                                    width="16px" height="16px" />
                                                            </td>
                                                            <td class="event-summary-label-container">
                                                                <span class="caption">
                                                                    Back door entrance
                                                                </span>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>
                                                                <img src=""
                                                                    width="16px" height="16px" />
                                                            </td>
                                                            <td class="event-summary-label-container">
                                                                <span class="caption">
                                                                    Wheelchair Accessible
                                                                </span>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>

Как сделать этот блок адаптивным, чтобы в мобильной версии он складывался в два ряда, не используя при этом media queries?

Answer 1

[Danny Arty]

Вот хороший метод

Comments

[nivaech]

Заработало, благодарю.

Answer 2

[Антон Литвиненко]

Попробуйте фреймворк
https://mjml.io/documentation/
Разобраться - пара часов + там есть примеры кода.
Зато он за вас думает о максимальной поддержке почтовых клиентов