Try it
Use Tab to move focus through the controls. Toggle the modes and notice whether the visual order matches the focus order.
Mode: mismatch
Tile 1 DOM #1
Action:
Tile 2 DOM #2
Action:
Tile 3 DOM #3
Action:
What “mismatch” means
Bad pattern: using CSS order (flex) or manual grid placement to change the visual order while leaving the DOM order different. Keyboard focus will follow DOM order, so focus may jump visually.
Good pattern: keep DOM order aligned with the meaningful visual order. If you must change layout responsively, reflow using CSS that preserves order (e.g., different columns) rather than reordering items.
Extra note: screen readers also follow DOM order. “Reading order” problems show up in linear navigation even when you’re not using a keyboard.