[Bootstrap] 레이아웃 / order / offset

.

Bootstrap 정렬 순서

Bootstrap 에서 container > row 일 때, col 요소들을 order 클래스를 이용하여 각 요소들의 순서를 정할 수 있다. order 속성의 default 값은 order-0  이고, 숫자가 클 수록 뒤로 배치 된다.
또한, 아이템 div 들의 시작 위치를 조정시키려면 offset 클래스를 사용하여 해당 아이템의 위치를 기준으로 시작위치를 바꿀 수 있다.

.

order

<div class="container">
	<div class="row">
    	<div class="col order-3">1</div>
    	<div class="col order-2">2</div>
    	<div class="col order-1">3</div>
    	<div class="col order-0">4</div>
    </div>
    
    <div class="row">
    	<div class="col order-last">1</div>
    	<div class="col order-2">2</div>
    	<div class="col order-1">3</div>
    	<div class="col order-fisrt">4</div>
    </div>
    
    <div class="row">
    	<div class="col order-md-4">1</div>
    	<div class="col order-md-3">2</div>
    	<div class="col order-md-2">3</div>
    	<div class="col order-md-1">4</div>
    </div>
</div>

order

order-숫자 / order-breakpoint-숫자 브라우저의 크기에 따라 정렬 순서를 조절할 수 있다.

.

offset

<div class="container">
    <div class="row">
        <div class="col-md-4">1</div>
        <div class="col-md-4 offset-md-4">2</div>
    </div>

    <div class="row">
        <div class="col-sm-4">1</div>
        <div class="col-sm-4 offset-sm-4">2</div>
    </div>

    <div class="row">
        <div class="col-lg-3 offset-lg-2 offset-md-3">1</div>
        <div class="col-lg-3 offset-lg-4 offset-md-3">2</div>
    </div>
</div>​

offset

offset 다음의 숫자는 해당컬럼의 숫자와 합할 때 12 이하로 되게 하는것이 좋다. 각 디바이스 마다 섹션이나 div의 위치를 바꾸어야 할 때가 있는데 그 때, order or offset 클래스를 사용한다.

 

 

참고

https://espania.tistory.com/123

Bootstrap 레이아웃 / CSS3 flex-5(order)

https://jsbin.com/gupalocuga/edit?html,output 

JS Bin