Sorry, I was trying to make a gif for you, but I can't seem to make the file small enough. Here is a screenshot, though. Do you see how the blue line is highlighted along the entire height of your photo grid?
Everything to the left of the blue line will show up first on mobile. Then the second column, third, etc. Your goal is to break the line up horizontally, and this is where it gets a little tricky. When you add elements next to each other make sure to only allow the blue line to light up for one row.
You will also need to make sure the blue line highlights across the entire row like this:
If you go into the editor you will see a copy page at the end of your page list. Hover over the images to see the blue line and the way I arranged the first two rows. If you click the desktop icon and switch to mobile view you can confirm the way the images will show up on mobile. 
Let me know if this makes sense. It's a little confusing to explain but if you go into the copy site and start moving things around it should make sense. It's a bit more difficult to manage when you already have the images uploaded, but it will make things easier for you as you add more pages.
Totally understand. Sorry I couldn't explain it better! It's a bit confusing, but I wish you the best with your new host.
