Stacking in different breakpoints

In my desktop view, I want the orange box to be next to the image like this.

However, in my mobile view, I want the orange box to be below the image. For this to work with different screen sizes, I’m assuming I need to stack the image above the orange box to maintain the same distance between the bottom of the image and the top of the orange box.


My problem is that once I stack these two elements in the mobile, the stacking carries over to the desktop and tablet breakpoints, which I do not want. Is there a way to avoid this or is there another strategy I could use to achieve what I want in the mobile version?

Try Grid instead.

Grid does similar result but does not impact larger breakpoints.

Completely agree that for this setup using a grid would be best. Made a quick example below.

https://www.editorx.com/academy/lessons/grid

Awesome, thanks for the video too!