Media queries in e-Newsletter custom template stylesheet

I have the following in the stylesheet of my custom email template:

@media only screen and (max-width: 480px){
    .column-container {
        display:block !important;
        width:100% !important;
    }
}

But this style is applied inline to the element irrespective of the screen width.

Is it possible to use media queries? If not, how can I create a two column layout that shifts to one column on small devices?

Thanks