<h1>order:</h1>
<p>검정색 배경으로 처리한 두 번째 flex-item의 순서를 변경합니다.</p>
<h2>.a>:nth-child(2){ order:0 } // default</h2>
<div class="a z">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<h2>.b>:nth-child(2){ order:1 }</h2>
<div class="b z">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<h2>.c>:nth-child(2){ order:2 } // 다른 아이템의 order가 모두 '0'이므로 결과는 '1'과 같음.</h2>
<div class="c z">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<h2>.d>:nth-child(2){ order:-1 }</h2>
<div class="d z">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<h2>.e>:nth-child(2){ order:-2 } // 다른 아이템의 order가 모두 '0'이므로 결과는 '-1'과 같음.</h2>
<div class="e z">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

.z{display:flex;outline:5px solid rgba(0,0,0,.5);color:white;margin-bottom:2em;}
.z>*{flex:1;}
.z>:nth-child(1){background:rgba(255,0,0,.66);}
.z>:nth-child(2){background:black;}
.z>:nth-child(3){background:rgba(0,0,255,.66);}

.a>:nth-child(2){order:0;}
.b>:nth-child(2){order:1;}
.c>:nth-child(2){order:2;}
.d>:nth-child(2){order:-1;}
.e>:nth-child(2){order:-2;}