Custom stacking order for columns on mobile
With email on mobile, you sometimes need to reverse the order in which stacked columns appear. You may even need to set a custom stacking order for layouts with 3+ columns. Acorn comes with pre-built layout examples that will help you achieve this.
We have included two examples:
- Reverse a 2-column layout
- Custom stacking order for a 3-column layout
Reverse a 2-column layout
It's often the case when you have text on the left and an image on the right. That's fine for desktop, since it's visible right away. But wouldn't it be nice if that image were shown first, on mobile devices?
Step by step:
- Add the
full-width-smclass to the<tr>tag that contains the columns - Use the
stack-sm-lastclass on the first column, andstack-sm-firston the last column - Finally, add the px-sm responsive spacing utility class on the first
<td>in your Row table
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="px-sm-16" style="padding: 0 24px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr class="full-width-sm">
<td class="col stack-sm-last" width="260" style="padding: 0 8px;">
<h2 style="font-weight: 300;">Last on Mobile</h2>
</td>
<td class="col stack-sm-first" width="260" style="padding: 0 8px;">
<h2 style="font-weight: 300;">First on mobile</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>Tip
Padding doesn't work on columns with stack-sm-first or stack-sm-last, due to the nature of the display CSS property being used to reverse them. In order to preserve the apparent container padding on mobile, we're setting the px-sm class on their parent <td>. If you need padding on mobile for these columns, wrap your content inside a <div> and use any of the responsive spacing utility classes on that, instead.
Custom stacking order for a 3-column layout
We can use the same technique to define a custom stacking order for mobile in a 3 or more columns email.
Step by step:
- Add the
full-width-smclass to the<tr>tag that contains the columns - Use the
stack-sm-topclass on the column(s) you want to show first - Use the
stack-sm-firstclass on the column(s) you want to show after the first column(s) - Use the
stack-sm-lastclass on the column(s) you want to show last - Just like before, add the
px-smresponsive spacing utility class on the first<td>in your Row table
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="px-sm-16" style="padding: 0 24px;">
<table cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr class="full-width-sm">
<td class="col stack-sm-last" width="168" style="padding: 0 8px;">
<h3 style="font-weight: 300;">Last on Mobile</h3>
</td>
<td class="col stack-sm-first" width="168" style="padding: 0 8px;">
<h3 style="font-weight: 300;">Second on Mobile</h3>
</td>
<td class="col stack-sm-top" width="168" style="padding: 0 8px;">
<h3 style="font-weight: 300;">First on Mobile</h3>
</td>
</tr>
</table>
</td>
</tr>
</table>Note
Columns using the same stack-sm- class will appear on mobile in the order defined in your HTML.