Reverse stack

The reverse stack option flips the visual order of columns in a row, so the right column appears first on desktop. On mobile, columns still stack in the source order, keeping content logical and accessible.

What it is

By default, rows in NSW email layouts render left-to-right. Adding the reverse attribute switches the visual flow to right-to-left.

• Desktop: columns display right-to-left.
• Mobile (≤639px): columns stack vertically in source order.
• Accessibility: screen readers read content in the order you write it, not the visual order.

This gives designers the flexibility to put a logo, image, or call to action on the right visually, while developers can keep text first in the HTML.

When to use

Use reverse stack when:

• You need right-weighted emphasis, such as a hero image or logo aligned on the right.
• A design calls for an image to lead visually, but text should remain first in the source.
• You want to avoid reordering your HTML just for visual appearance.

Avoid using it everywhere—it should only be applied to rows that specifically require it.

How to use

With <x-columns>

<x-columns
  columns="2"
  col1Width="1/2"
  col2Width="1/2"
  feature="right"
  reverse="true"
>
  <fill:col1>
    <!-- Text first in source (accessibility + mobile order) -->
    <x-text>Heading goes here</x-text>
    <x-text>Supporting copy for the feature.</x-text>
    <x-link>Learn more</x-link>
  </fill:col1>

  <fill:col2>
    <!-- Image second in source, appears first visually on desktop -->
    <x-image width="300" aspectRatio="16/9" mobileClass="mobile-left" />
  </fill:col2>
</x-columns>

• On desktop: image appears on the right.
• On mobile: text stacks above image.

With <x-features.horizontal>

<x-features.horizontal
  col1Width="1/2"
  col2Width="1/2"
  feature="right"
  reverse="true"
  imageWidth="300"
  imgAspectRatio="4/3"
/>

This component passes reverse through to <x-columns>, producing the same behaviour.

Do / Don't

Do

• Keep text first in source for accessibility and mobile stacking.
• Use reverse="true" only on rows that need right-to-left visual order.
• Combine with feature="left" or feature="right" if you want the outer edge flush.
• Test in multiple email clients to confirm alignment.

Don't

• Apply reverse to the entire template.
• Reorder HTML just for appearance—reverse already handles this.
• Use reverse to solve spacing issues—adjust padding, gutter, or feature instead.