Start With Content Priority
Decide what must be visible first on mobile before adjusting any columns. Priority-first thinking prevents cramped, unusable small screens.
What Usually Changes
Columns collapse, sidebars become drawers, and secondary metadata moves below core actions. Grouping rules stay consistent even when position changes.
What Should Stay Stable
Typography roles, spacing scale, and action hierarchy should remain recognizable across breakpoints. Users should feel one system, not three separate designs.
Exercise
Pick one page and define responsive intent before styling:
- List the top two tasks on desktop and mobile.
- Move one secondary panel below primary actions on mobile.
- Confirm your primary CTA is visible without scrolling.
Content Priority
The ranking of what users must see and do first at each viewport size.