Porque o order não funciona?

Front-end CSS
,
#1

Tenho 4 elementos 1 pai e os outros 3 filhos.

<div id="elemento_pai">
     <div><p>Order1</p></div>
     <div><p>Order2</p></div>
     <div><p>Order3</p></div>
</div>

#elemento_pai {
     display: flex;
     flex-direction: column;
}

#elemento_pai > div {
     width: 500px;
     background-color: #fff;
}

#elemento_pai > div:nth-child(1) {
     order: 2;
}

Alguem poderia me explicar porque o order não está funcionando?

Ou o elemento fica em primeiro ou em ultimo, porém eu queria coloca-lo em segundo

#2 
#elemento_pai {
     display: flex;
     flex-direction: column;
}

#elemento_pai > div {
     width: 500px;
     background-color: #fff;
}

#elemento_pai div:nth-child(2){
     order: -1;
}
#3

Segundo a documentação (aqui e aqui), se você não coloca o order em um elemento, o valor deste é zero.

Ou seja, o segundo e terceiro filhos estão com order zero, enquanto o primeiro está com order 2. Por isso não funciona, pois assim o segundo e terceiro serão colocados antes, e o primeiro ficará depois deles.

Pra resolver, depende da ordem que você quer. Se é para ser Order2, Order1 e Order3, bastaria fazer:

#elemento_pai > div:nth-child(2) {
     order: 1;
}
#elemento_pai > div:nth-child(1) {
     order: 2;
}
#elemento_pai > div:nth-child(3) {
     order: 3;
}

Ou simplesmente mude o HTML pra ficar na ordem desejada :slight_smile: