Bootstrap 레이아웃

[Bootstrap Grid 레이아웃(반응형)]

.row 안에 .col 사용하면 균일하게 쪼개기 가능

<div class="row">
            <div class="col">안녕하세요</div>      
            <div class="col">안녕하세요</div>           
            <div class="col">안녕하세요</div>

--> flex 필요없이 편리하게 균등분배 가능

 <div class="col-3">안녕하세요</div>   

--> 가로로 쪼개고 싶으면 col-차지할 크기
--> 총 12칸으로, col-3은 정확히 4등분 한 크기

[반응형 조건문]
--> @media 문법 없이도 반응형 레이아웃 개발 가능한 장점!!

 <div class="row">
            <div class="col-md-6">안녕하세요</div>  

--> col을 이용해 가로로 쪼갠걸 반응형으로
--> md 사이즈 이상에서만 적용해주세요
--> 상세 사이즈는 grid system 검색

[기타 유용 기능]

<div class="row">
            <div class="col-lg-4  order-3">안녕하세요1</div>      
            <div class="col-lg-4  order-2">안녕하세요2</div>           
            <div class="col-lg-4 order-1">안녕하세요3</div>       
</div>

--> 순서 조정 가능: order-first or order-1하면 열 맨 앞으로 옴

<div class="col-4 order-md-1">안녕하세요3</div>   

--> order-md-1 : md 사이즈 이상에서만 오더 적용