Simple Custom Elementor Column Order on Mobile

January 25, 2021

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.

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.

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

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 );