Reverse stack Columns block style

functions.php

<?php

// Reverses stack. Reverses the order of the columns on "mobile" using the
// default WordPress breakpoint.
//
// Note: this is not an ideal method of handling this for screen readers. The
// columns are still in their original order in the DOM. But I don't have any
// other solutions at the moment. One alternative for at least one use case is
// to use the Media & Text block, but that case is only for a two-colum image
// and text section.

add_action('init', function() {
	register_block_style('core/columns', [
		'name'         => 'reverse-stack',
		'label'        => __('Reverse Stack', 'themeslug'),
		'inline_style' => '@media (max-width: 782px) {
			.wp-block-columns.is-style-reverse-stack {
				flex-wrap: wrap-reverse !important;
			}
		}'
	]);
});