[bootstrap] 부트스트랩 그리드 – 그리드를 밀고 당기는 선택자 사용하기

화면너비	768px 미만	768px 이상	992px 이상	1200px 이상
그리드 배열	항상 가로배열	가로 배열에서 위 수치에 이르면 세로 배열로 전환
.container 너비	없음 (항상 화면 전체너비)	750px	970px	1170px
클래스 선택자 접두어	.col-xs- (xs: extra small)	.col-sm- (sm: small)	.col-md- (md: medium)	.col-lg- (lg: large)
거터(그리드 사이 여백) 크기	30px, 그리드 좌우측 15px 패딩

 

좌측이 내용이고, 우측이 사이드바인 그리드입니다.
각 요소 맨 끝에 .col-md-push-4와 .col-md-pull-8 선택자를 추가했습니다.
push와 pull은 왼쪽을 기준으로 하므로 push는 왼쪽에서 오른쪽으로 미는 것이고 pull은 오른쪽에서 왼쪽으로 끄는 것입니다.

 

<div class=”col-md-8 col-lg-8 col-sm-8 col-md-push-4“>…</div>
<div class=”col-md-4 col-lg-4 col-sm-4 col-md-pull-8“>…</div>

 

해당 숫자만큼 이동하므로 위치가 서로 바뀝니다.
md 크기의 선택자만 입력했으므로 위의 경우 992px 이상, 1200px 미만의 화면 너비에서만 작동하고 다른 크기에서는 원위치로 돌아갑니다.