[Bootstrap] .row / .col-*-*

※ .row

.container 또는 .container-fluid 안에 .row로 행을 만든다.

※ .col-*-*

.row안에 .col-*-*로 열을 만든다. 첫번째 * 에는 xs, sm, md, lg 중에 하나를,

두번째 *에는 1부터 12까지의 수 중 하나를 작성한다.

• xs : 항상 적용된다.
• sm : 가로 해상도 768px 이상에서 적용된다.
• md : 가로 해상도 992px 이상에서 적용된다.
• lg : 가로 해상도 1200px 이상에서 적용된다.
• 1 - 12 : 행을 12등분하여 그 중 몇개를 사용할지 지정한다.

예를 들어 .col-xs-6은 항상 행의 크기를 6/12을 가로 크기로 한다는 것이다.

.col-sm-6은 가로 해상도 768px 이상에서 행의 6/12을 가로 크기로 한다는 것이다.

만약 가로 해상도가 768px미만이라면 행 전체를 가로 크기로 한다.

.col-*-*을 여러 개 사용하면 가로 해상도에 따라 열의 가로 크기를 다르게 정할 수 있다.

예를 들어, <div class="col-xs-4 col-sm-6"> 이라면

가로 해상도 767px 이하에서는 col-xs-4가 적용되어 4/12 가 되고,

768px 이상에서는 col-sm-6 이 적용되어 6/12가 된다.

※ 출처 : https://www.codingfactory.net/node/1059