flex-wrap property to
wrap will make the columns go back to their specified width and the gree and black columns will be wraped to the begining of the frame.
Note that setting it to
wrap-reverse will not make the grey empty space from the
#box-container stay at the bottom while changing the columns order.