Choose responsive breakpoints from content

A layout should change when its content no longer works, not when a list of popular devices says that a new category has begun.

Begin with the narrow layout

Place content in priority order and allow text, controls and media to use the available width. Increase the viewport until line length, grouping or unused space justifies a different arrangement.

Keep breakpoints local to behaviour

Navigation, data tables and card grids may need to change at different widths. Avoid one global phone-tablet-desktop set that forces unrelated components to adopt the same transition.

Test the spaces between devices

Resize continuously, zoom text and use long content rather than checking only named handset dimensions. New devices then fall into a layout governed by available space instead of an incomplete model list.