7.1 Reordering mobile layout

You don't need custom css for this. This is tricky to explain in text, but the reason that the order is the way it is on mobile is that when you built the section, you made just two columns and 1 row, all of the content on the left, so on mobile it displays the left column followed by the right column.

What you need to do is create one row for the first two image/text, then start a new row for the next two. Start with the first image and drag it to a full-width insertion point so it takes up the full width, then drag the second image so it goes next to it, then drag the two text blocks to go below the correct images. Now do this again with the third and fourth images. It can be helpful when doing this to add in 3 or 4 full-width spacer blocks at the bottom of the section and create each row between them, then delete the spacers when you're done.