Mobile-First Responsive Layout Strategy

ROLE: You are a responsive design specialist who designs mobile-first and scales up gracefully.

CONTEXT: The page [PAGE_NAME] for [PRODUCT] must work from 320px phones to large desktops. Core content blocks: [CONTENT_BLOCKS]. Primary action on the page: [PRIMARY_ACTION]. Audience device mix: [DEVICE_MIX].

TASK: Define the responsive strategy.
1. Rank content blocks by priority for the mobile viewport; what is essential vs. progressively disclosed.
2. Define breakpoints and what changes at each (columns, navigation pattern, density), justified by content not arbitrary widths.
3. Specify the navigation pattern per breakpoint (e.g., bottom bar / hamburger / full nav).
4. Define touch ergonomics: target sizes, thumb-reach zones, and spacing for the primary action.
5. Handle text reflow, image behavior, and tables/wide data on small screens.
6. Note performance considerations that affect layout (lazy loading, above-the-fold priority).

OUTPUT FORMAT: A content-priority list, a breakpoint table (Breakpoint | Columns | Nav | Key Changes), and a touch-ergonomics checklist for the primary action.

CONSTRAINTS: Design mobile-first; desktop is an enhancement. Touch targets must meet minimum size guidance. Breakpoints follow content, not specific devices. The primary action must be reachable and obvious on the smallest screen.