Guided Notes
W3.CSS: Responsive Layout
The 12-column grid, rows and columns, halves, thirds, and quarters, cells, flex and grid classes, and hiding by screen size.
The 12-column grid
Slide 1 / 5W3.CSS divides a row into 12 equal columns. A w3-row holds w3-col elements whose size classes say how many columns they span on each screen size:
• s1–s12 — small screens (phones, up to 600px) • m1–m12 — medium screens (tablets, 601–992px) • l1–l12 — large screens (laptops, 993px and up)
<div class="w3-col s12 m6 l4"> is full width on phones, half on tablets, and a third on large screens.
