How to organize the layout of bootstrap4 responsive blocks?

Question

HTML

Hello. I have a question about adaptive layout. When viewing the full-size version of the site, the page looks like this: ( fig. 1 )

When viewed from a mobile device, the blocks line up in order and the page looks like this: ( fig. 2 )

But this is not quite what you need.
How to bring the page to this look: ( Fig. 3 )

So far, the idea came to me just to make blocks visible / invisible for different screen sizes and use them to get the desired look. But can it be done cleaner, without crutches...?

Answer 1

shpargalkablog.ru/2016/06/order.html