Responsive-friendly fluid CSS grid with no JS

Question

Five of us have spent a day and a half working on this - got some very close solutions, but seems like it might be impossible to do without pulling in Javascript.

Scenario We're using a responsive (media-query based), 960 grid layout. There are four divs with content. These four divs need to semantically be in the order shown in the image below. Since it is the 960 grid, we also have wrapper divs per "row" - like this:

<div id="topzone">
  <div id="one">1</div>
  <div id="two">2</div>
</div>
<div id="bottomzone">
  <div id="three">3</div>
  <div id="four">4</div>
</div>

Div one has the intro to an article, div two has an advertisement, div three has the actual article and div four has random stuff (facebook feeds, whatever).

On mobile, the divs need to display in order from one to four. On desktop they need to display the same, but in two columns, horizontally ordered first.

So far so good. Here is the kicker:

1. We don't know what height the divs will be - they will vary with each page (even the advertisement one).
2. There can't be any vertical gaps between divs.
3. We can't use Javascript (or really, really, really don't want to - we know we can do this easily with JS)

If you just do floats left and right you get gaps:

<div id="topzone">
  <div id="one" style="float: left; height: 300px">1</div>
  <div id="two" style="float: right; height: 200px">2</div>
</div>
<div id="bottomzone">
  <div id="three" style="float: left; height: 100px">3</div>
  <div id="four" style="float: right; height: 300px">4</div>
</div>

Attempted Solutions CSS tables don't allow for rowspans. Workarounds either have the empty div get overlayed or leave gaps.

Masonry CSS orders the divs vertically so mobile would incorrectly drop divs two and four below one and three.

The closest we came was hijacking the overflow property to display the third div below the first one. This worked brilliantly - until we tried to add a footer to the page. Because overflow has no height according to the browser, the footer overlayed the third div.

    <style type="text/css">
        #one {
            height: 300px;
            background-color: yellow;
        }

        #two {
            height: 200px;
            background-color: brown;
        }

        #three {
            background-color: blue; /* only shows in mobile, otherwise hidden behind #one */
        }
        #three-inner {
            height: 100px;
            border: 2px solid black;
        }
        #four {
            height: 300px;
            background-color: burlywood;
        }

        /* Non-mobile */
        @media all and (min-width: 740px) and (min-device-width: 740px), 
                       (max-device-width: 800px) and (min-width: 740px) {
            #one {
                float: left;
                width: 50%;
            }
            #two {
                float: right;
                width: 50%;
            }
            #three {
                height: 0px; /* turns into overflow */
                width: 50%; 
            }
            #three-inner {
                clear: left;
            }
            #four {
                float: right; 
                width: 50%;
                clear: right;
            }
        }

    </style>
    <div id="topzone">
        <div id="one">
            <p><strong>First block.</strong></p>
        </div>
        <div id="two">
            <strong>Second block</strong>
        </div>
        <div id="bottomzone">
            <div id="three">
                <div id="three-inner">
                    <p><strong>Third block.</strong></p>
                </div>
            </div>
            <div id="four">
                <p><strong>Fourth block.</strong></p>
            </div>
        </div>
    </div>

There must be a way to do this in all CSS - tell me there is?