Columns Should be Able to Set to Stack Left on Top OR Right on Top on Mobile

[MadtownLems]

What problem does this address?

Currently, the Columns block as a 'Stack on mobile' feature. It's great, but slightly limiting because the left column always stacks on top. We have encountered lots of times where we'd like the right column to stack above on Mobile. One of the most common uses is when we use columns to alternate types of content in a zig-zag fashion - perhaps an Image and a button on one side and a column of text on the other. When these columns stack on mobile, instead of it displaying:
Image
Text
Image
Text

it ends up looking like
Image
Text
Text
Image

What is your proposed solution?

When "Stack on mobile" is enabled for the Columns block, there could/should be an additional setting to toggle between "Stack Left Column on Top" vs "Stack Right Colum on Top." (or simply "Inverse Stacking Order" or whatever you think makes sense.)

Then, we could toggle this setting on on every other row of columns so that things stack much cleaner on Mobile.

[Humanify-nl]

I have to agree, currently all my themes have a block-style for this on the columns block (reverse-stack) as a standard.

[sophiegyo]

The columns are designated as flexbox in the front-end CSS, I would love to see an order option for each column in the editor, specifically for smaller viewports. It'd be especially useful for layouts where there's a "left sidebar".

[KZeni]

I would definitely like this. Currently, I'm needing to add a plugin to implement this which then adds complexity, bloat, & more features than what I'm actually needing here (with this then being a common feature to want/need on columns on any website.)

It seems #40967 is held up by the fact it has some accessibility implications, but that doesn't mean people aren't doing it via other means (often making it worse-off than if it was just included as standard) when it shouldn't mean taking away that choice (how is it that changing column ordering became a thing that accessibility tools/services can't interpret/handle without issue? Surely we're not doomed to have any flexbox column order adjustments breaks accessibility forever, right?)

Automattic/block-experiments#211 has also brought it up when it comes to the Layout Grid block also from Automattic (then potentially making it more advanced where you can drag & drop individual columns for a manual ordering of things [leaving the standard Columns block then a simple reverse order toggle.])

[websitegenii]

We have built our solution to give us more control over the stacking on mobile. Adding the option to reverse the stack and then later the option to specify the order of the stack would be a great tool to have.

Currently, the standard layout for many sites is
"Image / Text"
"Text / Image"
"Image / Text"

This turns into
Image
Text
Text
Image
Image
Text

On mobile, which does not look good.

[tomxygen]

Are there any updates on this topic?

[sal]

The is a clear Gutenberg blocker in many of my projects which ends up in unnecessary installation of a pagebuilder to achieve this. Any updates..?

[romanfinkwp]

Agree. I believe a simple switcher, 'Reverse on mobile,' turning on CSS flex-direction: column-reverse on screens 768px wide and narrower, should be the best solution. Any updates?

[michaelhaberle]

I absolutely agree -- this should be a built-in feature.

As with most things Gutenberg, there are thankfully many ways to address this. As such, I am sharing one such way below! If anyone has any suggestions or alternative methods, then I wholeheartedly encourage sharing.

1. Use JS to register a "Default" and "Reverse On Mobile" button that is used to toggle a class on the Column parent block.

wp.domReady( () => {
	wp.blocks.registerBlockStyle( 'core/columns', {
		name: 'default',
		label: 'Default',
		isDefault: true,
	});

	wp.blocks.registerBlockStyle( 'core/columns', {
		name: 'reverse-mobile',
		label: 'Reverse On Mobile',
	});
});

2 Include the prior JS however you'd like, but an easy, broad method is to just create a shared JS file and use wp_enqueue_script via enqueue_block_editor_assets within your functions.php file. An example:

add_action( 'enqueue_block_editor_assets', 'enqueue_editor' );
function enqueue_editor() {	
    wp_enqueue_script ( 'haberle-editor-script', get_template_directory_uri() . '/assets/js/editor.js' );
}

3. Next, add corresponding CSS to perform the reverse (sample breakpoint included)

//adjust breakpoint as needed
@media(max-width:781px) {
	.is-style-reverse-mobile {
		flex-direction: column-reverse;		
	}
}

Cheers

[masperber]

@michaelhaberle I developed a plugin to fix this issue using your comment as a basis. I also provided support for Media & Text Blocks, which have a similar issue, and I enqueued the block assets so that the reversed order displays in the block editor.

[eric-michel]

We have built our solution to give us more control over the stacking on mobile. Adding the option to reverse the stack and then later the option to specify the order of the stack would be a great tool to have.

Currently, the standard layout for many sites is "Image / Text" "Text / Image" "Image / Text"

This turns into Image Text Text Image Image Text

On mobile, which does not look good.

We run into this a ton. It would be really nice if there were a simple toggle in the columns block that swapped the CSS from flex-wrap: wrap; to flex-wrap: wrap-reverse;. It's not even super simple to add a custom class to override this, because for some reason the CSS that ships with the columns block uses !important flags, which necessitates recreating the media query as well.