Edit: I first posted instructions on how to create a responsive layout here, but then realized that the main issue here is to swap the order of the elements - so I deleted my post and come here with a different take.
Let me be very clear first that what you are trying to do is an absolute accessibility nightmare. Any user that relies on keyboard navigation will be confused by the elements appearing in a different logical order than how they can access them, e.g. by tabbing to the next element. The same is true for assistive technologies like screen readers, which will still use the old order, and thus will fall out of sync with the elements that are displayed.
I can only very strongly recommend against doing something like this. Better re-organize your site layout in a way that this kind of swap is not necessary.
If you still insist, you will have to create a CSS file (e.g. userstyles.css) and create a media query for the screen width that you are targetting.
You can then use a grig layout for the two boxes, and in the media query, set the positioning, e.g. using grid-row-start: 2;
for the first element.
Again, I can only recommend to never do this, as this will be a bad user experience for many potential users.