Как создать html-рассылку с отзывчивым порядком блокировки

Question

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

<style>
@media all and (max-width: 600px){
 .on600-widthfull { width:100%;min-width:100%; }
}
</style>
<table>
 <tr>
  <th class="on600-widthfull">
   <table class="on600-widthfull">
    <tr><th>1</th></tr>
    <tr><th>2</th></tr>
   </table>
  </th>
  <th class="on600-widthfull">3</th>
 </tr>
</table>

Answer 1

Это очень простой пример того, как это будет работать.

Прежде всего, вам нужен запрос @media в таблице стилей:

<style>
td {
    text-align: center;
    padding: 10px 0;
}
  @media screen and (max-width: 600px) {
    .stack-in-mobile {
      display: block !important;
      width: 100% !important;
      max-width: 100% !important;
    }
  }
</style>

Далее вам нужен стол. Ваша идея 1-3-2 никогда не сработает. Это будет:

<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="100%" style="margin: 0 auto;">
  <tr>
    <td class="stack-in-mobile">1</td>
    <td rowspan="2" class="stack-in-mobile">2</td>
  </tr>
  <tr>
    <td class="stack-in-mobile">3</td>
  </tr>
</table>

Он работает в каждом крупном почтовом клиенте, но не имеет форматирования, поэтому вам нужно поработать над этим. Основная идея состоит в том, чтобы иметь в мобильном классе класс, который переформатирует таблицу.

Я бы посоветовал взглянуть на некоторые существующие шаблоны электронной почты, чтобы лучше понять, как они работают, и последовать этому примеру. Я предлагаю такой, как Цербер.

• https://tedgoas.github.io/Cerberus/

Удачи.

td {
text-align: center;
padding: 10px 0;
}
  @media screen and (max-width: 600px) {
.stack-in-mobile {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}
  }

<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="100%" style="margin: 0 auto;">
  <tr>
<td class="stack-in-mobile">1</td>
<td rowspan="2" class="stack-in-mobile">2</td>
  </tr>
  <tr>
<td class="stack-in-mobile">3</td>
  </tr>
</table>