How to use one image first for the background and then make it the top image?

Question

css

Hello.
I have a block with a background image. Is it possible to somehow make this image a background on a desktop, and at a resolution less than < 991, it becomes above the text like a picture. In this case, you need to use the same image and you can not duplicate it. That is, it should be the same for both the background and the picture from the top.
Example
In the example, I'm just duplicating the image, but I need it to be the same for all resolutions, but displayed differently.
Thank you.

Answer 1

And why change from the background to "just a picture"? To make it look the way you want, it's enough just to correctly position the blocks and position them differently through the media