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;
}