CSS Grids and Responsive Design

I am planning to use a Grid system for a site, but I'd like to be able to break the grid selectively. This would mean, for example, turning an OOCSS size1of2 into a size1of1). Ideally, the html would look something like this:

<div class="line">
    <div class="unit size1of2 respond-480">
        <h3>1/2</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div class="unit size1of2 respond-480 lastUnit">
        <h3>1/2</h3>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
</div>

Then I'd have something like the following css:

@media screen and (max-device-width: 480px) {
    .respond-480 {
        /* something to linearize the box */
    }
}

Does anyone know of a way to do this with OOCSS, or another grid system? I'm looking for this level of control, as opposed to a simpler responsive grid.

Solution

Turns out it makes more sense to add the respond480 class to the line rather than the unit. Not surprising. The following code works rather well for modern browsers. I used the child selector to simplify things -- though it may be possible to do a workaround, older browsers (IE<6) don't support these media queries anyway.

@media screen and (max-width: 480px) {
    .respond480 > .unit {
        width: auto;
        float: none;
    }
}

I was digging through the OOCSS source, and came across grids/grids_iphone.css. This lends some credibility to my strategy. Anyone know if !important is mandatory? Selectivity seems work for me without it -- probably due to the two class selectors.

@media screen and (max-width: 319px) {
    .unit {
        float: none !important;
        width: auto !important;
    }
}

And here's a page showing it in action. I used Nicole Sullivan's grid test from Arnaud Gueras, but with more filler text. Note that I left one 2of2 segment purposefully un-linearized, to demonstrate that it's not necessary to linearize everything.