Block Editor: Reverse Columns on Mobile

Aprašymas

This plugin adds a „Reverse on Mobile” option to the Columns, Row, Stack and Media & Text blocks in the WordPress Gutenberg block editor. This option allows you to reorder columns in mobile view for better presentation.

Ekrano nuotraukos

  • „Reverse on Mobile” option in the block settings.
  • Example of columns reversed in mobile view.

Diegimas

  1. Download the plugin.
  2. Unzip the downloaded file.
  3. Upload the block-editor-columns-reverse folder to the /wp-content/plugins/ directory.
  4. Activate the plugin through the ‘Plugins’ menu in WordPress.

DUK

Which blocks are supported?

The core/columns, core/group (flex layouts), and core/media-text blocks are supported.

How do I enable the „Reverse on Mobile” option?

In the block editor, select a Columns, Row, Stack or Media & Text block, then go to the block settings in the sidebar. You will see an option to „Reverse on Mobile”.

Note: For Row blocks, you must enable „Allow to wrap to multiple lines” in the Layout settings for the reverse option to appear.

What is the breakpoint for the mobile view?

The mobile view breakpoint is set at less than 782px, matching the one used for the core/columns block. When the screen width is 781px or smaller, columns will reverse their order if the „Reverse on Mobile” option is enabled.

For the core/media-text block, the default breakpoint is 600px or below.

Atsiliepimai

15 birželio, 2025
A nice little plugin that only does what it needs to do. Very useful for anyone, who does not want to implement a custom solution or write the CSS code with some manually attached CSS class into their themes.
20 sausio, 2025
exactly as described: stacks columns on mobile view in reverse
Perskaityti visus atsiliepimus (4)

Programuotojai ir komandos nariai

“Block Editor: Reverse Columns on Mobile” yra atviro kodo programa. Prie jos sukūrimo prisidėję žmonės surašyti toliau.

Autoriai

Pakeitimų istorija

1.0.8

  • Fixed: Group Row blocks with wrap disabled (nowrap) no longer display the „Reverse on mobile” option in settings.
  • Fixed: Group Row blocks with wrap enabled now use wrap-reverse to correctly reverse elements when they wrap to multiple lines.
  • Fixed: Horizontal alignment (left/right/center/space-between) is now preserved when Row blocks wrap.

1.0.7

  • Support for 6.8.X.

1.0.6

  • Refactor responsive styles.
  • Add support for core/media-text breakpoint (<= 600px).

1.0.5

  • Removed the ‘Reverse on mobile’ option in core/group when the layout is undefined.

1.0.4

  • Fix: Resolved the issue where ‘Reverse on mobile’ always stacked elements on mobile, even when ‘Stack on mobile’ was turned off.
  • Separated CSS for front-end and editor.

1.0.3

  • Added support for core/media-text block.
  • Removed the option when the group block is in the default constrained layout.

1.0.2

  • Improvements to avoid potential conflicts with third-party code.

1.0.1

  • Support for 6.7.X.
  • Update text domain for i18n consistency.

1.0.0

  • Initial release of the plugin.