Change Column Order On Mobile For Elementor

What is Elementor ?

Elementor is a powerful and popular WordPress Page Builder used by Freelancers, Website Owners, Web Development companies to create websites. I have personally used Elementor Page Builder extensively and made quite a few sites using it.

Creating Pages Using Elementor

One of the reasons behind popularity of Elementor is that it provides WYSIWGYG interface to users to to make individual pages , posts, portfolio etc easily. User can add different elements to the page as per their requirements and customize various attributes of these elements like Margin, Padding, Color, Typography etc. For creating a particular layout, user just needs to create different sections and add columns as per their requirement to each section.

Once columns are created under each section, user can go ahead and add individual elements ( Text Block, CTA, Icon Box, Image etc ) .

Column Ordering in Elementor

Columns are ordered in the same manner as they are created – i.e. The column that is first in the builder will be displayed first , while column that comes after will be redered later. This functionality is perfect – as that is what’s required by us to display.

Why Change Column Order / Reverse Column Order on Mobile For Elementor?

However the problem arises when you are planning to show images alternatively in different columns as per the screenshot attached.

Layout Designed for Desktop

The above display will render perfectly on desktop. However in mobile, it will be displayed as follows

Layout Rendered on Mobile:

To solve this issue, it becomes necessary to reverse / change the column ordering for mobile so that Text and Image are displayed one after the other as per image given below

Layout On Mobile ( Required)

So how can you solve this issue?

For Elementor < version 3.16

To Change Column Order in Elementor / For Responsive Column Ordering Elementor / For Reversing Column Order in Elementor For Mobile & Tablets

Simply follow the 4 steps as given in the screenshot provided to reverse / change order of column in Elementor for mobile.

Change Column Ordering / Responsive Column Ordering On Elementor For Mobile / Tablets

Step 1:

Click Edit Section of Layout

Step 2:

Click and go To Advanced Settings of Section

Step 3:

Select Reverse Column (YES) on Mobile & Reverse Column (Yes) on Tablet under Responsive of Advanced Section

Step 4:

Click Update on Elementor

By following these simple 4 steps you can easily change order of section on Mobile For Elementor.

For Elementor Version > 3.16 , When Flexbox Mode Active

Step 1:

Click Edit Container of Layout in mobile view

Step 2:

Change the Direction of Container to Reverse

Step 3:

Click Update on Elementor

By following these simple 4 steps you can easily change order of section on Mobile For Elementor.

I have worked extensively on Elementor as well as many other themes and page builders. In case you wish to design / develop your website, do contact me.

Suggested Reading

Complete Guide to Adding Breadcrumb on Elementor Website

Change Column Order On Mobile For Kadence Blocks

Similar Posts