Flip Alternating columns in html email for mobile - html

Question

I have am trying to figure out how to have 3 columns in a table row but hide the first or the last depending on whether it's mobile or desktop. My original thought was to add another TD to the bottom and hide one via css with media queries but that didn't seem to work very well.
Desktop view with alternating images
Mobile view which needs the picture with the lady with the graduation hat above the What is a beneficiary grey box.
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr align="center" valign="middle">
<td align="center" width="50%" class="column" valign="top" style="text-align:left; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:normal; font-size:16px; color:#44464a; line-height:1.4; padding-top:0px; padding-right:0px; padding-bottom:0px; padding-left:0px;"> <img class="person" src="c29229/c29229_4seasons_photos_2.jpg" alt="photo of people" style="width:300; height:auto; border:0 none; display:block;" /> </td>
<td align="center" valign="middle" width="50%" class="column" style="text-align:center; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:normal; font-size:16px; color:#ffffff; line-height:1.4; padding-top:0px; padding-right:30px; padding-bottom:0px; padding-left:30px; background-color: #ab811d;">
<h2 style="text-align:center; font-weight: normal !important; font-size: 24px; color:#ffffff; margin-bottom: 20px !important;">
<div class="spacer" style="padding-top: 40px; display:none;"> </div>
Complete your beneficiary designation
</h2>
<p style="margin-bottom:0px;">Vea esta correo electrónico en español</p>
</td>
</tr>
</table>

Answer 1

There is a way to do this without relying on media queries, if you'd like total coverage in all email clients. Using the dir attribute along with max-width, you can specify which <td> appears first on wide.
Start by laying out each table 2-column row in a mobile-first manner: The image in the first <td> and the text in the second. Because of the source order, when these layers stack the image will always be on top on the text. Once the column widths exceed their max-width, they'll stack without needing media queries.
This solves mobile, but how do you make some images appear in the right column on desktop? That's where dir comes in. Adding dir=rtl at the parent <td> causes containing elements to run in reverse. So the last column appears first.
Here is a basic example:
<tr>
<!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="rtl" bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="font-size:0; padding: 0;">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="600">
<tr>
<td align="left" valign="top" width="300">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:280px; vertical-align:top;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<img src="http://placehold.it/200" width="300" height="" border="0" alt="" style="width: 100%; max-width: 300px; height: auto;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td align="left" valign="top" width="300">
<![endif]-->
<div style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:280px; vertical-align:top;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr"> <!-- Don't forget to switch dir to ltr here, or else text runs in reverse -->
Text Goes Here
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
If you layout each <tr> in a manner like this which the image in the first column, swapping the order of the columns in each row can be achieved by adding a dir=rtl to the parent <td>.

Answer 2

E-Mail-Clients are a bit tricky with their CSS.
You can order them the way you want them to be on mobile, and then add the following using for desktop:
position: relative;
left: -50%;
The remaining code depends on how you switch between two-column and one-column layout.
Most modern Mail programs support flexbox. With flexbox, you can re-order elements using the order property or by setting the direction to row-reverse.