In our responsive emails we frequently have elements with multiple classes. We do this so that we don't repeat our CSS. We have TDs that fill (a.k.a. fluidly stretch to fill the available horizontal space) and we have TDs that drop (stack vertically and then fill the horizontal space). Because we believe in keeping our email source as DRY as possible, we define the fill and drop behaviors once and use them together when necessary. Here's an example:

@media only screen and (max-width: 480px) {
[class~="drop"] { display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
[class~="fill"] { width: 100% !important; background-size: 100% auto !important; }
}
...
<table width=500 class="fill">
<td>This column will stretch (or shink) to fill the available space on mobile devices.</td>
</table>
...
<table width=500 class="fill">
<td width=50% class="drop fill">These columns should stack vertically on mobile devices</td>
<td width=50% class="drop fill">This column should drop below the first column on mobile devices</td>
</table>

We use the =~ attribute selector which matches values against a space-delimited list. This appears to work great on-device but Litmus Compatibility Results show a different story. Most of the time, the drop works as expected but on longer emails, Litmus results show some of the columns (those earlier in the email) drop and fill as expected but later in the email the columns stop dropping properly and instead appear as squished columns aligned horizontally.

So my question is this: does anyone else use =~ selectors and have you had any problems with them? Anyone else seen this peculiar behavior in Litmus results?