Get Premium

Simple Custom Elementor Column Order on Mobile

Element.How also offers premium tutorials! Check them here:

Table of Contents

In this article you will learn how to easily switch column positions vertically in an Elementor section in a mobile responsive view.

We will be adding this setting to your Elementor Columns where the order can be set for each one of them.

Simple Custom Elementor Column Order on Mobile 1

Code credit to this thread.

Install Code Snippet plugin for the Elementor mobile column order code

If you prefer to not install any plugin, you can add the code to your theme's functions.php as well.

Here is why I recommend Code Snippet plugin instead.

Create a new Snippet, add this code, and active it

Go to the snippets option in the WordPress admin console and click on Add New.

Simple Custom Elementor Column Order on Mobile 2

Give your snippet some name and paste the PHP code into the contents body and then click on Activate to activate the snippet.

Simple Custom Elementor Column Order on Mobile 3

Snippet Code:

<script> 
/* Please login to get the code 
 * The code will be for the Simple Custom Elementor Column Order on Mobile tutorial 
 * Found at this URL https://element.how/elementor-column-order-mobile/ 
 */ 
</script>

Adjust your responsive Elementor column order on mobile to your liking

Simple Custom Elementor Column Order on Mobile 4

You will now see "Responsive Column Order"in your column settings. Change the value for each column, to arrange them as you need!

Enjoy your new column order options!

Now you know how to easily adjust column orders in Elementor.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

14 Responses

    1. Yes, that will work as well! I think it's a better idea to use Code Snippets plugin though. It's easier to keep your snippets organized and to know what's going on, it stays on theme change, and it doesn't bloat the website at all. Recommended!

  4. After I updated to the latest version of Elementor 3.7, it not working!
    when on the edit page, it seems ok; but back to front end, the order not same as in preview.

  6. Hi. I tried to do the code snippet way, but when I activate the snippet it says

    "The snippet has been deactivated due to an error on line 2: Cannot redeclare function add_responsive_column_order."

    Can you help me please?

Leave a Reply