How to Set the Order of Stacked Columns in a Responsive Email Design


Article first Printed in October 2014, updated April 2019

Do you have two or more columns of content in your responsive email design, but find them stacked in the incorrect order when viewed on mobile devices? With coding that is simple, you can set them.

Why should you code?

Marketers have an important job. By maintaining communication, they let clients know what a company’s up to; what it’s selling, what deals it’s going, and what products are hitting website or its shops.

Email marketing is a creative place, so it is not unusual for a marketer to leave all the technical aspects to somebody else (or even the template they’re using) when digitally building the mails that are sent out. This is a massive error that many marketing experts are bound to make. The HTML coding that goes into making an email campaign can enhance or destroy a company’s chances at garnering customer interest, and it’s important that marketers understand every aspect of their jobs.

Email code comprises everything the marketer writes, to the bottom of the content from the header. It shows things such as why a message keeps falling into people’s spam folders that the marketer can not prepare for. While they’re not likely to be able to answer this in their own, using a basic understanding of the technical aspects of an email will enable the marketer to ask better questions of a company’s tech team when attempting to understand what’s wrong.

How do I add columns in email?

The entrepreneurs will also know how to make their emails more attractive to readers’ eyes. For example, stack columns that are responsive will separate the content of the message into sections that are various, making it more easy to browse. A three-column pile HTML email might be the tool you need to ensure readers are not frustrated or unable to follow.

Working in different views

To set this up in Outlook, click on”Change View” under the”View” mark at the peak of the page. From there, click on”Current View” and then”View Settings.” In the”Advanced View Settings” box, select”Columns,” and then select”Available Columns” to decide which ones best suit your requirements. You will then click”Add,” followed by”OK” to give your email its preferred look.

Obtain a basic understanding of code

Products must be built according to the demands and wants of the customers, and nobody knows the customers’ needs better than the marketer. Knowing and understanding code can bring the marketer. They know how to coordinate better with the technical team and would have a better understanding of the processes behind mails and other communication tactics. Additionally, many executives claim that marketers should take control of development and coding

Having a basic understanding of code will also enable the marketer to make adjustments and small enhancements to their messages which yield results that are better . For instance, knowing HTML and CSS can enable a marketer to change the font, style, or size of their verbiage to make certain words stand out to viewers. They can embed videos or social media messages .

A marketer is given a better understanding of how much a job will cost by having knowledge of coding. Coding is not an easy feat; the method costs a team both money and time when preparing an application for a company. Understanding the code that goes into an similar or email message will enable the marketer to create financially responsible decisions that help the company save on the services and products they’re promoting.

The dir attribute

There are times when you wish you had a bit more control, when coding emails. By way of instance, when creating designs with the objective of stacking several columns (or technically, table cells) for easy reading on mobile screens, the natural order when using% column widths is left to top right. How about if you wanted an image in a side column to pile on top of a text in a left handed column? The solution is something quite unlikely: the dir attribute.

Dir permits you to modify the ordering of any HTML elements, although its original purpose is to correct content for right-to-left text (as you likely know, the browser default in places that use Romanized text is left-to-right). It supported in every client, so far as we know.

Here is the order that is natural when using% column widths:

Default order of stacked columns

By applying dir=”RTL” into a table (thus, changing the order in which nested cells stack) and dir=”ltr” into the cells within (to ensure the text reads left-to-right rather than backward), you can undo the browser/email customer defaults and reliably stack content when it is seen on small viewports. Here’s the simplified code:

/* Media query for cellular */
@media only screen and (max-width: 480px)


/* HTML */

Right-hand side content: Stacks on top on mobile

Left-hand side content: Stacks underneath on mobile


When column widths, Implementing dir = rtl

To help you see the difference, compare:

Wrap up

A big thanks go to Brett DeWoody for documenting this technique and providing a solid starting point for our instance.

Coding is taking a significant role as entrepreneurs seek more control over professions and their campaigns in marketing. Keep in mind that studying coding can help you:

  • Take control over email layouts
  • Control and change how emails look on mobile devices
  • Advance your career by enlarging your skillset

If you want to read more about creating responsive layouts that fare well in (nearly ) every email client, check out developing a centered, responsive design without media queries. On any device, you can take charge of your content flow with an understanding of these techniques.

The post How to Set the Order of Stacked Columns at a Responsive Email Design appeared first on Campaign Monitor.