Responsive Grid and having 1 column expand to 100% when it is the only column with content

I am developing responsive grid design for SharePoint websites. All is well when I have fixed width columns, etc. However, in the page layout where I need the following:

SECTION 1

LEFT COLUMN                 RIGHT COLUMN

RTE

WP

SECTION 2

WPLZone              WPMZone             WPRZone

What I need is when content is placed in the WPLZone if there is nothing in WPMZone or WPRZone, the WPLZone extends 100%.  I am using the id="_invisibleIfEmpty" name="_invisibleIfEmpty" for the divs and have a max-width to 100% but it seems to be keeping the fix width of the column 1 of 3.

Any suggestions on how to fix this?

Thanks!!