How to build html newsletter responsive block order

Question

I want to build 2 columns block which having 3 element inside, element 1 and element 2 are on the left while element 3 is on the right. The problem is I want it on the mobile version, the order is 1,3,2 (now it shows 1,2,3). How can I build it? description image

<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

This is a very simple example of how this would work.

First off, you need a @media query in the style sheet:

<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>

Next, you need a table. Your 1-3-2 idea will never work. This will:

<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>

It works in every major email client, but it has no formatting, so you'll need to work on that. The basic idea is to have a class in mobile that re-formats the table.

I would suggest looking at some existing email templates to get a better idea how they work and follow that example. I suggest one like Cerberus.

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

Good luck.

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>