Elementor Custom Column Order Code Snippet

Elementor currently only provides the ability to “Reverse” columns in a Section when on Tablet, or Mobile view…

Although, this doesn’t really help when you have a few columns, and might want to show only the last one first or the middle one last on mobile etc.

This is a where the following Code Snippet will help. It adds an extra option to Columns to define in which position you want it for a particular Responsive view.

Install the Code Snippets Plugin

First – if you don’t already have the code snippets plugin – you’ll need to install it. Go to Plugins > Add New > and Search for “code snippets” > then click ‘Install Now’ for the Code Snippets in search results. Then Click “Activate” once installed.

Now you can go to Snippets > Add New > Give it a title like “Custom Column Ordering”.

In the ‘Code’ section you’ll paste the code below:

				
					function snug_custom_order( $element, $args ) {
	$element->add_responsive_control(
		'responsive_column_order',
		[
			'label' => __( 'Responsive Column Order', 'snug-elementor-extra' ),
			'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', 'snug_custom_order', 10, 2 );
				
			

How to use the Elementor Custom Column Ordering

When you edit a Column, you’ll find an extra option for adjusting the Column Order…

This will work for each Responsive option, you can switch to a “Mobile” responsive view, and the Column Order will only affect that size. Note that smaller responsive sizes always inherit from larger sizes, unless overridden in the smaller size.

Share this article...

Facebook
Twitter
LinkedIn
Email

Related Articles...