How to move a block?

Question

css

There are blocks that are flattened to the right edge. (flex-end)
We need to make sure that the red and green blocks are flattened to the left edge.
Is it possible to do it without additional wrappers and float?
Maybe there is some magical thing about flexbox..
https://jsfiddle.net/umc2ns3o/2/

Answer 1

Alternatively https://jsfiddle.net/umc2ns3o/7/
UPD: Variant with pseudo-element and order https://jsfiddle.net/umc2ns3o/25/