한줄은 12개 레이아웃으로 이루어져 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>부트스트랩</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.col-sm-4 , .col-sm-6 , .col-md-4 { border:1px solid red; }
</style>
</head>
<body>
<!-- 생각해보기 답 -->
<div class="container" style="padding-top:50px;">
<div class="col-sm-6">1번 레이아웃</div>
<div class="col-sm-6">2번 레이아웃</div>
<div class="col-sm-6">3번 레이아웃</div>
</div>
</body>
</html>여기서 col-sm-6은 한줄에 6개씩 보이게 하겠다라는 뜻이다. 그래서 한줄에 "2번 레이아웃"까지 나오고 그 다음줄에는 "3번 레이아웃"이 출력되게 된다.
col-sm-6에서 sm은 small device라는 뜻을 가지고 있다.
md은 medium display라는 뜻을 가지고 있다.
그래서 sm을 사용했을떄 768px 크기보다 줄어들었을때 반응이 일어나는것이다.
**한번 생각해보자**
레이아웃이
768px보다 작을때는 1개만
768px 이상에서는 2개
970px 이상에서는 3개가 보이게 만들어보자.
<!-- 생각해보기 답 -->
<div class="container" style="padding-top:50px;">
<div class="col-sm-6 col-md-4">1번 레이아웃</div>
<div class="col-sm-6 col-md-4">2번 레이아웃</div>
<div class="col-sm-6 col-md-4">3번 레이아웃</div>
</div>