[CSS]flex/order 자식요소의 순서를 정하는 속성

html

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
</section>

css

section{
    display:flex;
    width:100%;
    background:lightcyan;
}
article{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100px;
    height:100px;
    font-size:50px;
    color:#fff;
    text-align:center;
    background:aqua;
    border:1px solid #000;
}
article:nth-of-type(2){
    order:3;
}

2번 article이 3번째에 위치함

이 때, article:nth-of-type(2)의 order를 음수로 줄 수 있다.
음수로 줄 경우, 맨 앞으로 당겨진다.

article:nth-of-type(2){
    order:-3;
}