[Bootstrap] Grid 시스템

    Bootstrap 그리드 System
https://poiemaweb.com/bootstrap-grid-system

bootstrap 3
	기기해상도	container 넓이
xs
sm	768	750
md	992	970
lg	1200	1170

Bootstrap 4
	min	max
xs		575
sm	576	767
md	768	991
lg	992	1199
xl	1200

* 그리드는 container 안에 있어야 한다


* 칼럼(세로줄)은 모두 12칸
    - 예
<div class="container-fluid">
    <div class="row">
      <div class="col-xs-8">xs-8</div>
      <div class="col-xs-4">xs-4</div>
    </div>
</div>


* 클래스 2개 이상 지정
    - 예
<div class="container-fluid">
    <p>Viewport width가 992px 이상이면 2열, 미만이면 1열로 정렬된다</p>
    <div class="row">
      <!--
      viewport width가 992px(medium device) 이상이면
      .col-md-8 class가 적용되어 width는 8/12(66.66666667%)

      viewport width가 992px(medium device) 미만이면
      .col-xs-12 class가 적용되어 width는 12/12(100%)
      -->
      <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
      <!--
      viewport width가 992px(medium device) 이상이면
      .col-md-4 class가 적용되어 width는 4/12(33.33333333%)

      viewport width가 992px(medium device) 미만이면
      .col-xs-12 class가 적용되어 width는 12/12(100%)
      -->
      <div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
    </div>


//========
* offset
    - 예) 4칸 오른쪽으로 이동
<div class="col-md-2 col-md-offset-4">


//========
* push , pull
    - 예)

    - 오른쪽으로 3칸 이동
<div class="col-xs-9 col-xs-push-3">.col-xs-9 .col-xs-push-3</div>

    - 왼쪽으로 9칸 이동
<div class="col-xs-3 col-xs-pull-9">.col-xs-3 .col-xs-pull-9</div>