Breakpoints
←Resize your browser window to see different number of columns on the different viewport breakoints desktop, tablet and phone.
The breakpoint classes are applied on the parental column container, not on the childs like with Flexbox breakpoints or CSS grid. That’s because columns have a uniform table like look.
Syntax:
.cols-{number}-{breakpoint}
SCSS:
_column-breakpoints.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
↑
9 columns on desktop
6 columns on tablet
3 columns on phone