html - How does flex's order decide how things should be ordered, if elements have the same order integer? -

situation follows:

<section class="filters">   <ul>     <li>color:       <ul>         <li style="order: 4;">red (4)</li>         <li style="order: 4;">blue (4)</li>         <li style="order: 0;">white (0)</li>         <li style="order: 2;">gold (2)</li>         <li style="order: 1;">purple (1)</li>         <li style="order: 2;">pink (2) </li>         <li style="order: 2;">silver (2)</li>         <li style="order: 0;">black (0)</li>         <li style="order: 0;">brown (0)</li>         <li style="order: 1;">yellow (1)</li>       </ul>     </li>   </ul> </section> 

css:

.filters ul li ul {   display: flex;   flex-direction: column-reverse; } 

the result:

• color:
  • blue (4)
  • red (4)
  • silver (2)
  • pink (2)
  • gold (2)
  • yellow (1)
  • purple (1)
  • brown (0)
  • black (0)
  • white (0)

how decide blue should before red? silver, green , black can live with: alphabetical. why order blue before red, though both have order of 4?

jsfiddle: http://jsfiddle.net/wf4fu13v/2/

items same order appear in document order (though specify reversed direction).

from the relevant spec:

a flex container lays out content in order-modified document order#, starting lowest numbered ordinal group , going up. items same ordinal group laid out in order appear in source document.

combine fact specify column-reverse, i'd "blue" comes before "red" because that's "reverse order" in appear in document.

the same holds "silver > pink > gold", have order of 2, , appear in reversed order in in document.

finally, same holds items order of 0.