If you think of responsive work as “shrinking the desktop screen to fit a phone”, the work never ends. You add a breakpoint, fix what broke there, and something breaks at a different width. The cause is not skill. It is the order you work in.
Starting narrow leaves fewer decisions
Going from wide to narrow is subtraction. At every step you decide what to drop, what to collapse, what to push below the fold. And because the wide layout was designed on the assumption that everything is visible, removing anything breaks the design it was built around.
The other direction is addition. On a narrow screen you barely have choices: stack it, and put the important thing first. Once that order is settled, the only remaining question at wider widths is what to do with the spare horizontal space. The entire class of “what do I remove” decisions disappears.
That order is your document structure
The single-column order a narrow screen forces on you is more than a layout. It becomes the source order of your HTML. Screen readers read in that order, keyboard focus moves in that order, and search engines infer importance from it.
Settle the desktop layout first and that order gets dragged around by visual position — a right-hand sidebar ending up before the article in the markup. Nothing looks wrong on a wide screen, but the moment it narrows, the sidebar sits above the article and is read out first. Patching that with CSS repositioning only makes it worse: now the visual order and the reading order disagree.
It is not about tooling, it is about the direction of your CSS
Reading “mobile-first” as “draw the narrow artboard first” only gets you halfway. What actually decides the outcome is which way your CSS points. Put the base declarations at the narrow size, and use min-width queries to add only as things get wider.
The base might be .cards { display: grid; gap: 1rem; }, with @media (min-width: 48rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } layered on top. Do it the other way — two columns by default, undone by max-width queries — and you accumulate undo rules at every width, each one overriding the last.
In WordPress the theme has often made this choice for you already. What to look for when choosing one is covered in the Themes & plugins archive, and how we rework the front end of a live site is published on the process page.
Next part
With the order settled, the next question is when to change the layout at all. To give away the conclusion: the content tells you, not a list of device names.