title: Multiple min-width in CSS media query on IE10
body: <p>Multiple min-width linked with 'and' on IE10 behaves not in the usual way I think the and operator should do:
  When window width is say 500px,</p>
  
  <pre><code>@media (min-width: 400px) and (min-width: 600px)  { not applying this }
  @media (min-width: 600px) and (min-width: 400px)  { applything this! }
  </code></pre>
  
  <p>See <a href="http://jsfiddle.net/86ba668s/8/" rel="nofollow">jsfiddle</a></p>
  
  <p><strong>The question is:</strong> anyway to make both work on IE10?  [edited here] which means 'not applying this' on both, in the way the and operator should behave.  Chrome works in the expected way.</p>
  
  <p>Suppose the code is already written as in the second line,  everything is tested good except IE because of this issue.  How to easily make IE not applying the second line, while not affecting other browsers?</p>
  
  <hr>
  
  <p>Here is only some background not directly related to the issue: I need clumsy multiple min-width because I use SCSS mixin to make general small, medium and large layouts.  </p>
  
  <pre><code>@mixin respond($view) {
      if $view == m {
          @media (min-width: MMM) and (max-width: LLL)  { ... }
      }
  }
  </code></pre>
  
  <p>On certain pages the medium layout splits into two layouts, so I need</p>
  
  <pre><code>@include respond(m) {
      @media (min-width: M2)  { ... }
  }
  </code></pre>
  
  <p>which is compiled into multiple min-width. </p>