Why is the CSS rule that I applied via the CSS injector module not active on my mobile device? I have a panel row with two regions and I wish to re-order the 
display for mobiles. Below is what I wish to accomplish:



And I thought it would be as simple as the below css rule :

@media screen and (max-width:480px)
{ 
   .pane-2 
    {
    display:block;
    }
}


But nothing happened with the above rules.

I am using the CSS Injector module to apply the above css.

Can anybody help me with this one?
Clear cache or CSS aggregation bug

Comment #1 in issue # 1588822 contains some interesting hints that might help to answer your question:


to see the changes, you must clear the cache. Since your question doesn't mention anything like that, make sure you did cear the cache.
bugs in CSS aggregation can be problematic with specific CSS constructs. If you trigger one of those, it can result in CSS being omitted from the aggregation CSS file.


CSS rule overwritten by another module

And the rules provided by this module might be overwritten by another module, as briefly mentioned in the last paragraph of the module's readme.txt ...

CSS edits via external editor

CSS edits via external text editor not displaying (which only applies to the 7.x-2.x version, not to 7.x-1.x) might be what's causing the issue.