How to implement such an arrangement of blocks?

Question

css

How to implement such an arrangement of blocks, taking into account the bootstrap columns?
For clarity, I highlighted the blocks with a yellow and green frame. Bootstrap columns - blue.
Between the bottom of the green box and the bottom of the yellow box is a 125 px space (margin-bottom: 125px;)

Answer 1

How is it on Bootstrap - I don’t know, but you can do it, for example, like this:

Answer 2

What exactly is causing the problem? It's just 2 divs with different z-index, one relative parent and absolute position relative to it.