모바일 기본값
col-12
main 12
sidebar 12
sub 12
sub 12
접두사가 없는 `col-12`는 가장 작은 화면부터 12열 전체를 차지합니다.
12열 그리드는 클래스 접두사에 맞춰 쌓이거나 나뉜다
`col-12 col-md-8`처럼 기본 폭과 breakpoint 폭을 함께 쓰면 모바일은 세로, 데스크톱은 나란한 배치가 됩니다.
md 이상 배치
col-md-8 + 4
main 8
side 4
sub 6
sub 6
`md` 기준을 넘으면 메인 콘텐츠와 사이드바가 8열과 4열로 나뉩니다.
row가 줄을 만든다
`row` 안의 컬럼 합이 12를 기준으로 한 줄의 폭을 나눕니다.
접두사가 조건이다
`sm`, `md`, `lg`는 해당 폭 이상에서 적용되는 레이아웃 규칙입니다.
중첩도 같은 원리
메인 컬럼 안의 작은 `row`도 다시 12열 기준으로 나눌 수 있습니다.
실습 페이지를 줄였을 때 사이드바가 아래로 내려가고, 넓혔을 때 8:4로 붙으면 Bootstrap 그리드 클래스가 의도대로 작동한 것입니다.