Block interleaving with vertical overlap

Question

css

It is necessary to arrange the blocks in pairs horizontally (not a problem) and lower the left blocks down to get an overlay.
In principle, this is also not a problem, it is solved through

.row:nth-child(odd) { position: relative; top: -5em;}

, however, the next (bottom) pair of blocks is NOT raised - that's the whole problem.
Illustration and code: http://codepen.io/anon/pen/pdnGq
And this is how http://codepen.io/anon/pen/BLesv I want to do.
(Sizes and paddings are given as an example, in reality there will be different and with different ratios)
It would be possible to solve the problem by wrapping paired elements in a common container, but a solution is needed without changing the HTML code.

Answer 1

you can try negative margin-top, but may not work on some older browsers