How to swap divs?

Question

css

An example is 4 blocks codepen.io/Keche/pen/JWMPBa
If you create conditions for the blocks to line up under each other. Then the sequence of blocks will be as follows:
Block 1
Block 2
Block 3
Block 4
And how to make it so that with adaptability it would be like this:
Block1
Block3
Block2
Block4

Answer 1

If you can use flexbox. That is very simple.
If not, I solved this problem by duplicating the block.

Answer 2

flexbox - codepen.io/anon/pen/evMjyG

Answer 3

Just put blocks 1 and 3 in one div, and 2 and 4 in another. In the styles of the new blocks, set the rubber width and "float: left"