JSFiddle - React, Tailwind, and code Playground

HTML

<h1></h1>
<h2 class="w4">1. red when w>=400</h2>
<h2 class="w6">2. red when w>=600</h2>
<h2 class="w46">3. red when w>=400 and w>=600</h2>
<h2 class="w64">4. red when w>=600 and w>=400</h2>

<hr/>
Please adjust window width.<br/>
When say w= 500, on Chrome only line 1 is in red,<br/>
but on IE10 line 1 and 4 are in red.

CSS

@media (min-width: 400px) {    
    h2.w4 {background-color: red;}
}



@media (min-width: 600px) {    
    h2.w6 {background-color: red;}
}


@media (min-width: 400px) and (min-width: 600px) {    
    h2.w46 {background-color: red;}
}


@media (min-width: 600px) and (min-width: 400px) {    
    h2.w64 {background-color: red;}
}

JavaScript

function red () {
$('h1').text(   'w= ' +  $(window).width()   );
}

$(window).resize(red);
red();  // init