List: vertical to horizontal?

I have a use case where I want to display an unsorted list with a vertical layout and then swap to a horizontal layout when below a certain size (breakpoint). The wrap layout option won’t work without some kind of hack as I don’t want to have a transitional phase where there might be two items side-by-side (see demo below). Any thoughts on how one might achieve this effect?

Demo: