Flexbox test

Flexbox layout

Vertical layout with reversed order: (flex-wrap: column-reverse)

Box 1

Box 2

Box 3

Horisontal layout with wrap: (flex-wrap: row-wrap)

Box 1

Box 2

Box 3

Only works in Opera and Chrome so far (2013)

Notice how the height is ignored in the vertical/column layout and the width is ignored in the horisontal/row layout because that is the axis the flex on

You also don't need to make any resize js, it is done automatically - try resizing window

2019.06.10 - Modern browsers working on the gecko(Firefox) or blink/webkit(chrome/safari/opera/vivaldi ...) engines work and have been for a while. Since MS will start using blink as well, there should be no hesitation to use this now