title: Swap out 3 differently-sized logos with media queries?
body: <p>I'm trying to have 3 different logo sizes (<code>small</code>, <code>med</code>, <code>big</code>) based on different screen sizes.  Here's my code:</p>
  
  <pre><code>@media screen and (max-width: 487px) {
    .site-header .site-branding {
      background-image: url("../images/logo_small.png") !important; 
    }
  }
  
  @media screen and (max-width: 1079px) {
    .site-header .site-branding {
      background-image: url("../images/logo_med.png") !important;
    }
  }
  
  @media screen and (min-width: 1080px) {
    .site-header .site-branding {
      background-image: url("../images/logo_big.png") !important;
    }
  }
  </code></pre>
  
  <p>This works swapping from <code>big</code> to <code>med</code>, but it won't swap again from <code>med</code> to <code>small</code>.  Why?</p>