How to make tables stack, right over left, in responsive email?
css, email, html, responsive-design
Solution
I experimented with a way to do this in another solution.
You can use the `dir="rtl"` to control how the columns stack. Here's an example:
<table class="deviceWidth" dir="rtl" width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; ">
<tr>
<td width="50%" dir="ltr" align="right" class="full">
<p style="mso-table-lspace:0;mso-table-rspace:0; padding:0; margin:0;">
<a href="#"><img src="http://placehold.it/440x440&text=RIGHT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>
</p>
</td>
<td width="50%" dir="ltr" align="left" class="full">
<a href="#"><img src="http://placehold.it/440x440&text=LEFT" alt="" border="0" style="display: block; width:100%; height:auto;" /></a>
</td>
</tr>
</table>
Combined with an `@media` query of:
@media only screen and (max-width: 640px) {
.full {
display:block;
width:100%;
}
}
Here's the full jsFiddle.
Problem
So this is my second responsive design email, so I'm stuck. I have 2 tables that I am trying to stack when viewed on mobile. Below is how the 2 tables will appear in desktop mode: ``` | 1 | 2 | ``` When viewed on mobile, I want the tables to appear as such: ``` | 2 | | 1 | ``` I've tried floating the tables and using `position:fixed !important` but I cant get the desired effect. Any help or guidance would be greatly appreciated.