How to make such a block on bootstrap 4?

Question

Layout

I can't figure out how to type. I can separately for desktop and separately for mobile devices. But so that when the screen is reduced, the desktop version looks like the version for mobile devices, I can’t figure out how best to do this. I'm afraid to write a crutch. This is the desktop version.

and this is what the version for mobile devices looks like

Answer 1

I, too, after a long hibernation, did not know this.
The essence of media queries.
Google it.
The meaning is this:
in CSS write:

.item {
width:100%;
}

/* а тут создаете условие для итема */

@media (max-width:500){

.item {
width:50%;
}

}

and for the tiles to be divided as you have - google CSS Grid - with the help of grids, you can arrange the tiles as you like. Accordingly, in the media query, specify the new location and that's it. If the screen size is less than a certain one, the media query condition and the CSS code inside it will be executed.
Do not forget to specify the scale of the mobile phone screen, otherwise the phone will stretch the page like on the desktop.

<!-- Mobile Specific Meta -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Answer 2

getbootstrap.com/docs/4.0/components/card/#card-columns