CSS만으로 DIV의 위치 바꾸기

CSS만으로 DIV의 위치를 바꾸려는 경우에 사용할 수 있는 코드입니다.

HTML 코드:

<div id="blockContainer">
<div id="blockA">블록 A</div>
<div id="blockB">블록 B</div>
<div id="blockC">블록 C</div>
</div>

CSS 코드:

#blockContainer {
display: -webkit-box;
display: -moz-box;
display: box;

-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
#blockA {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinal-group: 2;
}
#blockB {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinal-group: 3;
/* Source: stackoverflow */

http://jsfiddle.net/hLUHL/723/

두 개 요소의 위치를 바꾸는 경우 다음과 같은 코드도 가능합니다.

.container {
display:flex;
flex-direction: column-reverse;
}

.section1,
.section2 {
height: auto;
}

간단하게 CSS로 Div의 위치를 바꾸고 싶을 때 사용하면 좋을 듯 합니다. jQuery를 사용하면 더 간단하게 가능합니다(참고).