Change image position depending on screen resolution
<p>I have recently been learning about responsive web design. What I am trying to achieve is presented on the images below, one is for how the website should look like on desktop, and the other one is for mobiles devices.
So as you can see, there are four boxes. After clicking the box, in the textbox you will see some text referring to that box. What I have been thinking about is how to deal with this layout. Is it just the Media Queries and different CSS styling depending on the screen resolution? Or should i somehow (jquery?) switch the elements order in the DOM? Im not sure how to handle this. Thanks for any advice!</p>

<p><a href="https://i.stack.imgur.com/wlv9I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wlv9I.png" alt="Desktop"></a></p>

<p><a href="https://i.stack.imgur.com/5BoyD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5BoyD.png" alt="Smartphone"></a></p>