What is wrong with this media query

Question

I would be much obliged to anyone who might be able to tell me why this media query only works partially (the font size changes but not the color).

<div>
<span id='one'>This is one 
<span id='two'>and this is two</span>
 and now back in one</span>
</div>

@media all and (min-width:500px)
{
 #two{font-size:2em;color:#0000ff;text-decoration:underline;}
}

#two{color:red;}

Here is a fiddle showing the problem in action. Just drag the resize bar to adjust the size of the output window. The font size changes as expected but the color stays put.

Answer 1

try using this

#two{color:red;}

@media all and (min-width:500px){
    #two{
        font-size:2em;
        color:green;
        text-decoration:underline
    }
}

Answer 2

Because #two{color:red;} overrides the style in the media query because you put it after the media query. Put it before - JSFiddle