Responsive Column Ordering In Elementor

A popular web design technique swaps images and pictures as you go down rows on the page. It looks great on desktop, but often leads to a strange look on mobile. There needs to be a way to reverse the order of some columns. As I was building in Elementor, that's what I'll discuss here.

If you don't have Elementor installed and active, please start with our tutorial here, then come back to this.

How do you do responsive column ordering in Elementor?

1. Right click on the row
2. Select Edit Section
3. Click the Advanced tab
4. Select the Responsive dropdown
5. Toggle Reverse Columns (Tablet) and Reverse Columns (Mobile)
6. Click Update

Allow me to illustrate.

What responsive ordering looks like

The alternating images and text usually takes a form like this:

You might have half columns or one third picture, two thirds text, but the idea is the same. It serves to break up blocks of text and include some visual flow.

The numbers denote the column order.

The problem comes when you view this on mobile. It turns out like this:

If that's what you're going for, great. But more likely you want it to be picture, text, picture, text. Something like this:

To achieve that look, you need to reverse the column order of the first row, but not the second. To do this in Elementor, refer to the steps at the top of this tutorial, which looks something like this:

Make sure you test your design on different size screens to get the look you're after. If the columns are 50%, you might not want to reorder them on tablets.

How to responsively change the column widths

If your design looks unbalanced on a tablet, you might need to change the column widths responsively. You might want the following sequence...

How do you change the responsive column widths in Elementor?

1. Hover over the element you want to change
2. Right click the black column icon
3. Select Edit Column
4. Click the grey desktop icon next to Column Width (%) to show the tablet and mobile icons
5. Select the tablet or mobile icon
6. Change the percentage width in the input box to the right of the icons.

If you wanted to make sure the columns were full width on tablets, you would make this responsive column width 100. On mobile, this is set to 100 by default.

Where responsive column width editing really comes into its own is when you have three or more columns. These usually don't squash nicely on tablets. You usually won't want more than two columns on a tablet.

By using the responsive width editing, you can get this sequence:

The way to get this sequence is, on the tablet responsive width, set the first column to 100 and the other two columns to 50.

If you need to hide one or more of the columns responsively, I've written a tutorial on that here.

I hope you found this tutorial useful. It's simple techniques like this that can really make your design stand out on all screen sizes.