Flex box item ordering examples

Example:  The example below shows a container with 3 items.  The order shown is the default order (nothing has been changed)

flex item 1
flex item 2
flex item 3

Example with ordering:  The example below shows the same container with the same 3 items, but the order has been adjusted and item 2 has been given the property order:-1  (negative one)   You should note that flex item 2 is now BEFORE flex item 1.

flex item 1
flex item 2
flex item 3

Example with ordering applied to two items:  The example is the same as before, BUT the property order:-1 has been assigned to item 2 and item 3.  You should note that BOTH flex items 2 and 3 are now before flex item 1.

flex item 1
flex item 2
flex item 3

Example with ordering applied to two items:  The example is the same as before, BUT the property order:-2 (negative two) has been assigned to item 3;  -1 (negative one) has been assigned to item 2 and the default order (no assignment) is still applied to item 1.  You should notice that item 3 is now listed first because it has a higher negative value.

flex item 1
flex item 2
flex item 3