Simple Custom Elementor Column Order on Mobile

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.

Comments

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

Leave a Reply