title: Media Queries overriding each other
body: <p>I have a general question about media queries. The site I am working on has two responsive viewports: </p>
  
  <ul>
  <li>max-width: 414 px (iPhone) and </li>
  <li>max-width: 770px (iPad)</li>
  </ul>
  
  <p>The style tags are written in that order in the css document. Because they are cascading, my iPad queries keep overriding my iPhone queries (and vice versa). </p>
  
  <p>Is there a simple solution to this? It seems like I'm missing something really obvious.</p>