Mobile-first layout begins with a design for phones, especially portrait screens, then expands progressively for tablets and desktops. For visualizations, this may require simplifying the chart, changing its arrangement, and adding information or features as space increases. section 9.1.1 section 9.1
Implement the layout progressively:
- Design the mobile chart first, keeping the portrait layout simple and focused. section 9.1.1
- Code mobile styles and load only mobile-relevant styles and code on phones when possible. section 9.1.1
- Use min-width media queries to add layout space, supplementary information, and features at larger widths. section 9.1.1
- Assign full-width columns on small screens, then redistribute them across medium and large grid layouts. section 9.3.1
A chart dashboard with progressive columns
Give a visualization classes such as `col-12 col-md-6 col-lg-12`: it fills the row on phones, occupies half the width on medium screens, and returns to full width on large screens. A 12-column grid can also place a rankings chart across nine columns beside a three-column panel containing smaller charts. section 9.3.1
@media (min-width: 600px) { ... }
Inspect the min-width media-query pattern used to add styles at progressively larger screen widths. section 9.1.1
