Simple Custom Elementor Column Order on Mobile

Simple Custom Elementor Column Order on Mobile

Just launched! Checkout the CSS Course for Elementor users.

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:

	function add_responsive_column_order( $element, $args ) {
	$element->add_responsive_control(
		'responsive_column_order',
		[
			'label' => __( 'Responsive Column Order', 'elementor-extras' ),
			'type' => \Elementor\Controls_Manager::NUMBER,
			'separator' => 'before',
			'selectors' => [
				'{{WRAPPER}}' => '-webkit-order: {{VALUE}}; -ms-flex-order: {{VALUE}}; order: {{VALUE}};',
			],
		]
	);
}
add_action( 'elementor/element/column/layout/before_section_end', 'add_responsive_column_order', 10, 3 );

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 2445 Elements right here:

Checkout the Elementor Addon Finder directly

Comments

9 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!

  1. 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.

Leave a Reply

BRAND NEW

CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.