Reverse Stack

Define a 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:

  1. Reverse a 2-column layout
  2. 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:

  1. Add the full-width-sm class to the <tr> tag that contains the columns
  2. Use the stack-sm-last class on the first column, and stack-sm-first on the last column
  3. Finally, add the px-sm responsive spacing utility class on the first <td> in your Row table

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:

  1. Add the full-width-sm class to the <tr> tag that contains the columns
  2. Use the stack-sm-top class on the column(s) you want to show first
  3. Use the stack-sm-first class on the column(s) you want to show after the first column(s)
  4. Use the stack-sm-last class on the column(s) you want to show last
  5. Just like before, add the px-sm responsive spacing utility class on the first <td> in your Row table
Note: columns using the same stack-sm- class will appear on mobile in the order defined in your HTML.

Next Up: Spacing →
ThemeMountain

Current Version