You cannot just drop my sample into the theme css. The theme is a desktop approach and the columns are set to 100% for everything under 1200px. What you cold do is copying the 100% grid styles into the max-width: 800px section and alter the ones in max-width: 1200px to your needs. If you keep it as generic as is, you will have to be careful though that nothing else on the site is breaking.
If the four image sample is something unique you should consider to add a specific sample into the max:800 section. Something like this:
I am fascinated by responsiveness, but it is a challenge, especially with the pressure to complete the editorial side of things.
When you refer to the columns that are set to 100% in the 1200px section, do you mean just the column classes (e.g., one-fourth etc.)?
Are there some examples of this kind of code and how it works for various designs?