Multiple media queries in css not working

check this fiddle, change the browser width to see the the media query in action

@media screen and (max-width : 1500px) {
    body {
        background: #000;
        border-top: 2px solid #DDDDDD;
    }
}

@media screen and (min-width : 768px) and (max-width : 1024px) {
    body {
        background: #fff;
        border-top: 2px solid #DDDDDD;
    }
}

This fiddle works fine, but if you change the order of the media queries it wont work...try it for yourself!

CSS always selects the last style that was declared if multiple style are found for an attrib.

for e.g :

@media (max-width: 1024px) {
  body {
    background: black;
  }
}

@media (max-width: 768px) {
  body {
    background: white;
  }
}

for 765px ( since both m.q cover this width ) color selected would be white

You're missing the AND between (min-device-width : 176px) (max-device-width : 360px).

@media screen and (min-device-width : 176px) and  (max-device-width : 360px) {
    body {background: green; } 
}

The other issues here is you are using min-device-width.(referring to the resolution of the device vs browser width) which is what @NoobEditor is saying below.

Are you doing that on purpose? If not you should be using min-width && max-width

---

@media screen and (min-width : 176px) and  (max-width : 360px) {
    body {background: green; } 
}