What?

🚧 🚧 🚧 Note: This is an exploratory PR / idea — it very well may not even be a good idea to pursue! 🚧 🚧 🚧

Explore adding in a columnsOnTablet attribute to the Columns block, and a slider to control how many columns to collapse down to at tablet viewport sizes.

Why?

As discussed / raised in #41123 (comment) there are competing use cases for the "Stack on mobile" feature of the Columns block. On the one hand, some layouts (e.g. those involving a sidebar) should collapse down to a single column. On the other, some layouts (e.g. columns with images) might appear far too large at tablet viewports if they collapse down to a single column.

While the ideal solution is probably more in the direction of being able to set min / max widths on individual columns and have that logically collapse down based on intrinsic content sizes, I thought I'd at least explore what it'd look like if we had a Columns at tablet screen sizes control in the Columns UI.

⚠️ Note: I strongly prefer the idea of min / max width columns to the idea in this PR. As mentioned in #41123 (comment), it'd be really cool if we could have, say a 4 column layout on desktop, that collapses down to 2 columns on mobile based on a max 50% rule, for example. Still, this PR at least demonstrates what a UI control for columns on tablet might look like.

How?

• Conditionally show a Columns at tablet screen sizes slider in the Columns settings if Stack on mobile is selected
• Output CSS for

Note: the gaps / widths aren't yet being calculated correctly. If the approach in this PR winds up being viable, we'd likely want to copy over the server-side implementation from #41123

Testing Instructions

1. Add a columns block with some columns and content in each of the columns
2. Try switching on the Stack on mobile feature and selecting a number of columns for tablet screen sizes — it should collapse to equal width columns at that viewport size

Screenshots or screencast

Screengrab	Screenshot