Flexbox flex items: how to change the order they reshuffle to, due to small browser size

With a flexbox setup such as, for example: http://www.aalife.com/

if you progressively shrink your browser window, (or view with a small mobile device) the flex items rearrange themselves thus:

top: header
below that: main
below that: aside 1
below that: aside 2
below that: footer

What I want is the following order:
top: header
below that: aside 1
below that: main
below that: aside 2
below that: footer

Syndicate content