Control image dimensions and placement in CSS for responsiveness

Hi, I’m trying to improve the responsiveness of a webpage built using the SquareSpace platform. For reasons that aren’t worth going into, a friend of mine has asked me to make some changes to their homepage. Because of the way SS works, the only way I could make the changes was to recreate the homepage with the changes included (rather than add the changes to the existing homepage). If you know SS it has to do with Cover pages and Normal pages. If you don’t know SS it doesn’t matter.

Anyway, the original homepage (using a cover page) adapts to smaller screens very well. The main image on the left changes from portrait dimensions to landscape and moves above the text. You can see the original homepage here:

For some reason, the page I built (using a normal page with added CSS for customising) does not perform well as the screen gets smaller. The main image and the text just get squashed side by side until eventually the main image (seemingly with no place left to go) gets forced above the text, however it remains in portrait dimensions. You can see the page I built here:

I’m trying to find a way of using CSS to change the main image on the page I built to go from portrait to landscape and to move above the text much earlier as the screen gets smaller, so that the responsiveness is much smoother.

Is this possible? If so, can anyone here help me?

Any help would be greatly appreciated. I’ve been to a number of SquareSpace forums and Facebook groups with no luck on getting help.