Let content reveal the breakpoint
Start with flexible widths, wrapping, and sensible minimums. Add a breakpoint where the content actually becomes crowded rather than copying a device list that may not match the interface.
Recompose when priority changes
A narrow layout may stack columns, move supporting art, or turn a wide table into a different presentation. Critical labels and actions should stay complete; hiding information is a product decision, not a default responsive trick.
A familiar example
Adapting a lesson index
- Keep six chapter rows on a wide screen where comparison is easy.
- Stack the chapter introduction above its lessons when the row becomes crowded.
- Increase input text and tap targets on compact touch screens.
What to remember
- Use flexible foundations before breakpoints.
- Choose breakpoints from content pressure.
- Test narrow width, long text, zoom, and touch—not only one phone size.