Group text columns make one stream of content flow through multiple columns. They are not the same as separate Column blocks containing independent content. If paragraphs appear in an unexpected place on mobile, first decide whether you need flowing editorial text or side-by-side components.
Understand the new control before applying it
The Gutenberg implementation adds text-column support to Group and applies column-count to its wrapper. The Typography options menu exposes the Columns control. Global Styles and individual block settings can both contribute values, so inspect each level when a mobile override appears to be ignored.
This is guidance for builds containing that change, not a promise that every WordPress installation already has the control. Record the WordPress and Gutenberg versions used for your test. Avoid installing a development build on a live store solely to obtain this layout option.
Choose the right structure
Use flowing text columns for a continuous article or editorial section. Use separate blocks when each column is a distinct card, product, price plan or form. Visual similarity is not enough to make the structures interchangeable.
A useful fixture contains a heading, three numbered paragraphs, a short list and one descriptive link in each paragraph. Label the paragraphs A, B and C in staging. That makes the underlying sequence obvious without guessing from the appearance of a finished article.
Compare the source order with the way a reader follows the page. A layout should not require someone to jump unpredictably between columns to understand a sentence. Do not rearrange the DOM only to imitate the desktop screenshot if that makes the narrow layout confusing.
Structure: One continuous reading order. Overrides: Check global and block states. Breaks: Keep headings with useful context. Keyboard: Link focus follows the story. Proposed verification, not a customer test result.
Diagnose a mobile value that will not apply
Start with a single Group using Global Styles only. Set your intended desktop column count and a mobile value of one where the installed editor supports responsive states. Save, then inspect the public page at both widths.
Next, check whether the individual Group contains its own column count. A block-level setting can override the global value. In the implementation's test plan, an ordinary block-level value can also defeat the global mobile choice until the block's own responsive state is handled. Do not keep changing global values while an instance-level override remains in place.
| Result |
Narrow next step |
| All Groups stay multicolumn on mobile |
Inspect global responsive CSS and breakpoint |
| One Group differs from the others |
Inspect that block's saved attributes |
| Editor switches, public page does not |
Compare generated styles and served cache version |
| Paragraphs flow but headings split awkwardly |
Review fragmentation, not column count alone |
Keep headings and short units readable
Multi-column content can break between and inside elements. MDN explains the fragmentation controls for multicolumn layout. Use them selectively rather than adding break-inside: avoid to every descendant.
For example, a short contact-details unit may need to stay together. A very long section cannot always fit into the available column height, so forcing every section to avoid breaks can create large gaps or overflow. Test realistic content lengths rather than only the sample copy used during design.
Review where each heading lands. A heading at the bottom of one column with all its explanatory text at the top of the next is a poor result even if the CSS technically works. The appropriate correction may be fewer columns or a different content structure, not another breakpoint.
Run a reading-order check before release
Read the narrow version from start to finish, then navigate its links with a keyboard. Check the visible focus indicator at column edges. Use a screen reader or qualified accessibility review when the content is important to navigation or transactions; a visual pass cannot establish accessibility on its own.
Save and reopen the editor to confirm that the chosen values persist. Test an older page using the same Group styles so a global change does not unexpectedly restructure existing content.
If you are evaluating the proposed default theme, use the Ipsum staging migration checklist alongside this layout test. For a published page whose text order or mobile styling needs repair, HandL WP can inspect the block and stylesheet together.
References reviewed October 18, 2026. Diagrams and test fixtures are explanatory, not customer results.