Quilt Problem: Adding Row of 3 Columns Below Row Main (but keep max 1200px)

I added a row "row-main-lower" to the quilt & put 3 columns in there, but the 3 columns stacked on top of each other. 

If I put them in row-main-bottom, they go side-by-side (but extend all the way across the page)

I see in the CSS, row-main is getting some magic treatment:

While I can start applying those props to my new row (row-main-lower), I assume there's a bunch of other responsive stuff to consider. 

Core Question:  What I'm really trying to do with that 1200px max area is:

1. row-main: 2 columns
2. row-main-bottom:  3 columns

How would you go about putting 3 columns below the 2 columns?