container with display:flex; flex-flow: row wrap;
A flex item 1 with property style="flex 1 1 300px"
Item 2 style="flex 1 1 300 px"
Item 3 style="flex 2 2 600px"

first two occupy 300px each, if 300 px are available. Note we have a media query which linearizes this page.


same CSS code as above, but the container has flex-flow: row wrap-reverse; Which puts third item first.
Item 1 flex 1 1 300px
Item 2 flex 1 1 300 px
Item 3 flex 2 2 600px