Reverse column stacking order

By default, columns that stand side by side on a large device will change to stacked columns on a small device, where left to right becomes top to bottom. You can reverse the stacking order so the columns stack bottom to top.

We'll use an example where you have a three-column row with a Call to Action module in each column, as shown in this screenshot.

Using our example, here's a screenshot of the default stacking order in mobile view:

And here's what happens when you reverse the stacking order:

Note: The reversed stacking order applies to all columns in a group, so you only have to change the setting for one of the columns in a row. For more complex examples of how layers of columns in a row stack, see the column layouts overview in Related Articles.

For more details about how columns stack, see the column layouts overview in the Related Articles below. 

To reverse the stacking order of columns on small devices:

  1. Mouse over one of the modules in your columns and click Column Settings.
  2. Navigate to the Advanced tab. 
  3. In the Responsive Layout section, change Stacking Order to Reversed.