<!DOCTYPE html>
<html lang="ko">
<head>
<title>row </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.b {border: solid 2px cyan;}
</style>
</head>
<body>
col-xs-
<div class="container">
<div class="row">
<div class="col-xs-6 b">오필승</div>
<div class="col-xs-6 b">코리아</div>
</div>
<div class="row">
<div class="col-xs-4 b">한라산</div>
<div class="col-xs-4 b">북한산</div>
<div class="col-xs-4 b">관학산</div>
</div>
</div>
col-sm
<div class="container">
<div class="row">
<div class="col-sm-6 b">개나리</div>
<div class="col-sm-6 b">진달래</div>
</div>
<div class="row">
<div class="col-sm-4 b">강남역</div>
<div class="col-sm-4 b">역삼역</div>
<div class="col-sm-4 b">서초역</div>
</div>
</div>
col-md
<div class="container">
<div class="row">
<div class="col-md-6 b">홍길동</div>
<div class="col-md-6 b">김철수</div>
</div>
<div class="row">
<div class="col-md-4 b">국어</div>
<div class="col-md-4 b">영어</div>
<div class="col-md-4 b">수학</div>
</div>
</div>
col-lg
<div class="container">
<div class="row">
<div class="col-lg-6 b">html</div>
<div class="col-lg-6 b">java</div>
</div>
<div class="row">
<div class="col-lg-4 b">python</div>
<div class="col-lg-4 b">css</div>
<div class="col-lg-4 b">db</div>
</div>
</div>
칼럼의 합이 12개 미만인경우
<div class="container">
<div class="row">
<div class="col-md-5 b">html</div>
<div class="col-md-2 b">java</div>
<div class="col-md-3 b">css</div>
</div>
</div>
칼럼의 합이 12개 초과인 경우
<div class="container">
<div class="row">
<div class="col-md-5 b">html</div>
<div class="col-md-5 b">java</div>
<div class="col-md-3 b">javascript</div>
</div>
</div>
스크린 사이즈를 혼합해서 사용가능
<div class="container">
<div class="row">
<div class="col-md-3 col-lg-4 col-sm-6 b">html</div>
<div class="col-md-5 col-lg-4 col-sm-6 b">java</div>
<div class="col-md-3 col-lg-4 col-sm-12 b">css</div>
</div>
</div>
</body>
</html>
