title: Overriding media query through order precedence
body: <p>The 600px media query is not applying.  Since it does have order precedence, shouldn't it apply?</p>
  
  <pre><code>#mydiv {color:#FF0000;}
  @media screen and (max-width:750px){
      #mydiv {color:#000;}
  }
  @media screen and (max-width:600px){
      #mydiv {color:#33CC33;}
  }
  
  &lt;div id="mydiv"&gt;
      testing text color with media queries
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/xpnGh/3/" rel="nofollow">http://jsfiddle.net/xpnGh/3/</a></p>