Why does a desktop layout that “just stacks” usually feel broken on mobile?

A desktop layout feels broken when it just stacks because stacking preserves an order and a spacing that were both tuned for width, and a narrow screen strips away the very dimension that made them work. The layout was never a list. It was a two-dimensional arrangement where things sat beside each other on purpose, where whitespace was sized against wide columns, and where the eye moved across as much as down. Collapse all of that into a single tall column and the logic that held it together has nowhere left to live.

The mechanism has three parts, and they fail together. First, source order surfaces. On desktop a sidebar might sit to the right while the main content reads left, but in the markup the sidebar may come first, so stacking dumps it above the content the user actually wants. Second, spacing loses its scale. Margins and padding chosen to breathe between wide elements become enormous gaps when the elements shrink to full width, so the page feels loose and disconnected. Third, side-by-side relationships dissolve. A label paired with its value, an image paired with its caption, two cards meant to be compared, all of that meaning came from adjacency in the horizontal plane, and stacking turns the pairing into a sequence the reader has to mentally reassemble.

Picture a classic three-column feature section, an icon-and-text card flanked by two siblings, each balanced against the others so the trio reads as one statement. On the wide screen the eye takes them in almost at once and feels the parallel. Let them stack untouched and you get a long scroll of three identical blocks, the sense of comparison gone, the rhythm replaced by repetition, and a header that was sized to span all three now floating alone above the first one with too much air beneath it. A second case is the pricing table, where three plans sit side by side so a visitor scans across a row to compare one feature across tiers. Stacked, that row-wise comparison is impossible: the user reads all of plan one, scrolls past it, reads all of plan two, and has to hold the first plan in memory to judge the second, which is exactly the work the side-by-side layout was doing for them. Nothing is technically misplaced. It just feels wrong, because the width that carried the meaning is gone.

The catch is that some layouts genuinely were a single column already, a centered article, a simple form, a vertical feed, and those stack cleanly because they never relied on width in the first place. Naive stacking is not always a sin. It only betrays you when the original design used the horizontal axis to encode order, spacing, or relationship. The exception worth flagging is the section that looks one-dimensional but secretly is not, like a row of logos read as a set or a step-by-step flow whose left-to-right order implied sequence; stacked, the set can still read fine but the implied direction may need an explicit number or arrow to survive. The skill is recognizing which of your sections leaned on width, because those are the ones that will feel broken no matter how correct the code is.

So treat the column as a fresh canvas rather than a squeezed copy. Re-sequence the content so the most important thing comes first in the actual reading order, retune the spacing to the new element sizes instead of inheriting desktop margins, and rebuild any side-by-side meaning explicitly, with grouping, dividers, or repositioned captions. Stacking is a starting point, not a finish line, and the layouts built for width need you to redo the work that width was doing for free.