Is there any way to align responsive divs using both rows and columns in either flexbox or css like so:

[![enter image description here](https://i.stack.imgur.com/90BgT.png)](https://i.stack.imgur.com/90BgT.png)

Because of the ordering (and a mobile breakpoint), I can't simply do columns and because of the slight offsets, rows don't really work.

Should note that when resized for mobile, it should stack on top based on the numbered order. 

Any and all help is appreciated.