Layout Grid: Order

[intelligence]

Would be cool to be able to set order on the individual grid columns to allow an alternative layout for the different responsive breakpoints.

For example, set Column 2 to order: -1 on Mobile to make it appear first.

[KZeni]

Another approach that might be simpler for general use would be to have the layout grid block itself offer a mobile collapse order. Default is left first and the other option would be right first (reverse the direction of the columns on mobile so the right-most column becomes the first item on mobile & so on.)

That's all that's needed when working with a 2 column layout where something like an image/video on the right should be at the top of the content on mobile (while potentially useful for other situations as well.) I believe SiteOrigin Page Builder (https://wordpress.org/plugins/siteorigin-panels/) offers something similar to this for its rows with columns when it comes to mobile ordering of the columns, and it could be useful to see something similar here.

At that point, you don't need to worry about individual values for specific columns while meeting the needs for most common uses.

[Gustavo-Hilario]

Hey, y'all 👋

The user on 4938994-zen would benefit from this enhancement. They use an FSE theme and created a left sidebar for their home page. However, they want the sidebar to appear below the home page content on mobile. They don't have an option to change the order of the columns, so the huge left sidebar appears at the top of their site on mobile, but they would like to move it to the footer instead. So, changing the order of the columns on mobile would be very helpful.

[KZeni]

It seems like such a minor thing to add that then seems so important for mobile responsiveness to not be included here (definitely in this more advanced Layout Grid block, but maybe even in the standard Gutenberg columns block as well).

It's all too common that one might have content blocks stagger left/right/etc. with images/videos/etc. on desktop to make a more interesting layout, but then you're left with mobile then having the order show those staggered elements bumping up against each other when it would make more sense to no longer have them staggered like they were on desktop (ex. change the order of the column when collapsed to tablet/mobile.)

A ton of Gutenberg/Block editor plugins (Kadence, Otter, Stackable [at least in the paid upgrade version], and likely others) have added this mobile column ordering. However, I would love it if I could just add this one standalone Layout Grid plugin/block to then have this often-necessary feature be available without needing to add a whole library of blocks, patterns, editor changes, etc. just to then be given a columns/grid/layout block that offers this (again, regardless if this is available in the standard Columns block as well.)

Some go as far as letting you drag & drop the columns to set the ordering of tablet & mobile separately (see Stackable's implementation; it's a separate list in the editor sidebar that's drag & drop) so you can have totally (Method A) custom column ordering on each device size (likely using the order CSS property for each column to facilitate the manual ordering), but I do think it really could be (Method B) as simple as a dropdown offering "Left to right" (default) and "Right to left" as options to at least give some amount of control over column ordering when stacked/collapsed on tablet/mobile (likely simply using the flex-direction on whether the order should be reversed or not on mobile).

It would be even better if the standard Columns block has this so we don't even need this separate block to be added, but I could understand if it's deemed too advanced to include as standard (though it seems important enough just to at least have a dropdown or something to change the order on mobile) to then only be included here in the more-capable Layout Grid block (which should definitely have it added, at the very least).

Recap of what I think would be the best approach

I could definitely see it where the standard Columns block gets the basic dropdown of reversing the column order on mobile or not (as discussed at https://github.com/WordPress/gutenberg/pull/40967) while this Layout Grid block has the more advanced manual ordering of columns so we keep it where the Layout Grid gets the more capable variant of this feature (again, either method would be better than missing this feature entirely for both blocks.)

At that point, I think we could reference Stackable on how it offers the fully custom ordering of columns on both tablet & mobile.

Here's a screenshot showing how they have it as a drag & drop list in the block settings (tablet order not pictured; it's right below what's pictured & looks similar to the mobile setting) via https://docs.wpstackable.com/article/484-how-to-use-the-columns-container-block. Again, I believe that then uses the order CSS property to then apply things based on the block's settings (then represented in the editor when previewing as that device & on the front-end.) Layout Grid could/should adopt something similar which then allows the standard Columns block to add the more basic option of the dropdown of whether it should simply reverse order or not (which should also be something that's done.)

[bacoords]

Is this repo still active and is it open to PRs? I believe adding a third field here that says "Order" would be a game changer. More than just stacking or reversing on mobile, it would enable reversing the order at any breakpoint so that content could be semantically ordered properly regardless of screen.

Would be happy to start a PR if there was confirmation that this plugin is still being maintained.