Как заставить p-теги переходить из сложенного положения слева направо в отзывчивом письме

Question

Я создавал отзывчивое электронное письмо, и у меня были некоторые проблемы с изменениями на рабочем столе / мобильном телефоне. Я хочу, чтобы версия для настольного компьютера выглядела примерно так:

Order Summary                Shipping Address
12345                         111 Broadway st

И Мобайл должен выглядеть так:

Order Summary     12345
Shipping Address   111 Broadway Street

Я уже пробовал несколько способов, и хотя он работает в проверке html на моем локальном сервере, он не работает, когда я отправляю тестовое письмо на клиентский сервер.

Фрагмент кода показывает базовый шаблон электронной почты одного из разделов там, любое понимание будет высоко ценится

     @media screen and (max-width: 400px) {

      .two-column {
        max-width: 50%!important;
        width: 50% !important;
        background-color: #730E15!important;
      }

    }

<td class="two-column" style="padding: 5px 0 10px 0;text-align: center;font-size: 0;">
    <div class="section" style="width: 50%;max-width: 300px;display: inline-block;vertical-align: top;">
            <table width="100%" style="border-spacing: 0;font-family: sans-serif;color: #727f80;">
              <tr>
                <td class="inner-td" style="padding: 10px;">
                  <table class="content" style="border-spacing: 0;font-family: sans-serif;color: #727f80;width: 50%;padding-top: 20px;font-size: 16px;line-height: 20px;text-align: justify;">
                    <tr>
                      <td style="padding: 0;">
                        <p>Order Number</p>
                        <p> 12345 </p>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </div> <!--- End First Column of Two Columns -->

Answer 1

Расширяя мой комментарий:

Вы можете иметь как горизонтальные вертикальные заголовки в своем HTML, так и отображать правильный заголовок в зависимости от размера экрана.

Вы можете использовать CSS Media Queries для отображения нужного заголовка в зависимости от ширины экрана.

В качестве альтернативы, если вы используете <div>с вместо <table>s, вы можете использовать медиазапросы, чтобы "столбцы" плавали горизонтально на рабочем столе, но располагались вертикально на мобильном телефоне.