Displaying div in different places depending on screen size?

Question

css

The bottom line is, there are two columns for the "col-lg" version. In the left block there are "sections of the site" and below the block "Advertising banners" (that's what we need), and in the right "text block".
The task is that in "col-lg" "Ad banners" should be BELOW "site sections", and in "col-md" and below (i.e. in the mobile version, "Ad banners" should be located below the "text block") .
And the catch is this: There should be no duplication of the block with "Advertising banners" or "sections of the site";
If anyone knows, tell me, maybe someone has come across, I don’t see any ideas except through js.

Answer 1

I didn’t understand anything, but read about https://bootstrap-4.ru/docs/4.1/utilities/flex/#order, if you have columns 1 2 and you need styles 2 1 on the response, then order will help) if you if you want to throw over several divs, then only Js, cut the block and paste it somewhere else.