where's it braked?

broke.css

#dbg-mq {
  color: white;
  height: 10px;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 10px;
  z-index: 1000000;
}
#dbg-mq div {
  display: none;
}
@media (max-width: 480px) {
  #dbg-mq div.screen-xs {
    display: block;
  }
}
@media (min-width: 480px) and (max-width: 768px) {
  #dbg-mq div.screen-sm {
    display: block;
  }
}
@media (min-width: 768px) and (max-width: 992px) {
  #dbg-mq div.screen-md {
    display: block;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  #dbg-mq div.screen-lg {
    display: block;
  }
}

broke.html

<div id="dbg-mq">
  <div class="screen-xs">XS</div>
  <div class="screen-sm">SM</div>
  <div class="screen-md">MD</div>
  <div class="screen-lg">LG</div>
</div>