Flexbox by trial. Part 3. Order! Order!

Order

Order is set on an element in the flex container. It can be negative (-500 to make sure it's first element). If order value is the same on all elements, source order takes charge.

    .class {
      -webkit-order: 2;
      order: 2;
    }
  

Order vs flex-flow/justify-content

Order is set on an element in the flex container. Flex-flow/justify-content is set on flex container to control layout items inside.

Reverse order with flex-flow/justify-content

Reverse order with order

Nested elements

Each flex container has it's own order, doesn't inherit from parent or influenced by child containers.

Reverse order with flex-flow/justify-content