Got two or more columns of content in your responsive email design, but find them stacking in the wrong order when viewed on mobile devices? This simple coding technique will put them in their place.

When coding emails, there are likely times when you wish you had a little more control. For example, when creating layouts with the intent of stacking multiple columns (or technically, table cells) for easy reading on mobile displays, the natural order when using % column widths is left on top of right. But, how about if you wanted an image in a right-hand side column to stack on top of some text in a left-hand column? The answer is something quite unlikely – the dir attribute.

Quite simply, dir allows you to change the ordering of any HTML elements, although its original purpose is to adjust content for right-to-left text (as you likely know, the browser default in places that use Romanized text is left-to-right). It’s also supported in every email client that we know of.

Here’s the natural order when using % column widths:

Default order of stacked columns

By applying dir=”rtl” to a table (thus changing the order in which nested cells stack) and dir=”ltr” to the cells within (to ensure the text reads left-to-right instead of, well, backwards), you can reverse the browser/email client defaults and reliably stack content when it’s viewed on small viewports. Here’s the simplified code:


/* Media query for mobile*/
@media only screen and (max-width: 480px) {
.full {
display:block;
width:100%;
}
}

...

/* HTML */

<table dir="rtl" width="100%">
<tr>
<td width="50%" dir="ltr" class="full">

<p>Right-hand side content: Stacks on top on mobile</p>

</td>
<td width="50%" dir="ltr" class="full">

<p>Left-hand side content: Stacks underneath on mobile</p>

</td>
</tr>
</table>

dir=rtlApplying dir=rtl when using % column widths

To help you see the difference, compare:

And that’s a wrap. Huge thanks go to Brett DeWoody for documenting this technique and providing a solid starting point for our own example. If you’d like to read more about creating responsive layouts that fare well in (almost) every email client, I recommend checking out Creating a centered, responsive design without media queries. With an understanding of these techniques, you can take control of your content flow on any device.

  • Stephen

    Do you know if this also works with the table align method so that it works in Android 4.4.4 or is this just for the ‘display: block;’ method on table cells?

  • Niven

    Is this method even necessary?

    Successfully used the method of ordering my elements in the order I would like them to stack on smaller devices, and then use the align attribute to sit them in their correct position.
    So the right elements is coded first, then the left.

    Although now I think about it, that was using tables.
    Does my method not work on cells?
    Is that what this method is fixing?

  • Ros Hodgekiss

    Hi Niven, totally valid question – thanks for asking! There are two scenarios in which this method is useful:

    1. You are using table cells in a single table, instead of separate tables for columns of content. The former method results in less code and is not as prone to spacing issues in Outlook
    2. You are being deliberate about content order in code, for example, for the benefit of screen readers (more on that in a later post)

    Thanks, Niven – let me know if you have any other q’s :)

  • Jaina

    This is great, and feels like such a simple solution. More often than not, I try and make sure the content and key calls to action are on the left of my emails with accompanying imagery to the right. However, for mobile, when this gets stacked, the left usually ends up on top, and the imagery feels a bit wasted after the text/CTA. This is REALLY helpful in getting the order right for mobile. Thanks guys!

  • Rhys

    Great. We had a real headache recently with stacking tables going haywire in outlook (the spacing issue mentioned by Ros). This simple solution would solved it. As it was we had to implement EmailOnAcid’s successful but fiddly workaround.

    As always, keeping it simple is the route to a trouble free email.

  • Fred Hahnel

    Great article. I have looking into this since May with a template that wouldn’t display these properly in Outlook 2007 and greater. This has fixed this issue for us and such a simple and elegant solution!

  • Clack

    This is such a great post with many take-aways thanks for sharing.

  • Michael Cook

    Does this actually work on any mobile clients atall?
    Doesn’t work for iphones, being as they’re adjacent <td> elements and android gmail client ignores all media queries.

    Kinda defeats the point of having responsive emails if they don’t work on mobiles don’t you think?
    Why not use the normal <table align=”left” width=”50%”> method ?

  • Michael Cook

    Sorry my last post borked, surprisingly parsing html.. let’s try again:

    Does this actually work on any mobile clients atall?
    Doesn&#39t work for iphones, being as they&#39re adjacent <td> elements and android gmail client ignores all media queries.

    Kinda defeats the point of having responsive emails if they don&#39t work on mobiles don&#39t you think?
    Why not use the normal <table align=”left” width=”50%” style=”display:inline-block”> method ?

  • Ros Hodgekiss

    Hi Michael, that’s certainly unusual – myself (and others in this thread) have had success with this method, so would love to collaborate to get this working and/or address any shortcomings. Feel free to send in details and we’ll do our best to help!

    You might also want to check out our post on creating responsive layouts without media queries, especially if Gmail is of concern to you.

  • Niven

    Just wanted to add, this works great on correctly reverse ordering your two aligned tables IF you’ve ghosted in cells to fix Outlook rendering, which in turn incorrectly orders your elements in Outlook because you defined your right aligned table first.

    Add these two direction attributes and it’s working again :)

  • Ros Hodgekiss

    Thanks, Niven – great tip! And no thanks to Outlook for making us write twice as much code :P

  • Brian Helsby

    I have yet to send an email using this method, but I ran an example through Litmus, which sends a test email through selected email clients and then provides you with screen captures of the results. Oddly enough, the iPhone 4, 4s and 5 come back with the right column text stacked vertically. Any thoughts on why this is happening?

  • Ros Hodgekiss

    Hi Brian, we’d have to take a look at your code to be sure. I encourage you to both do a live test to a device and if that doesn’t look swell, post to our forums. Hopefully we’ll get to the bottom of this!

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free