Place a <div id="media-debug"></div> in the HTML, and this Sass code will show the active Bootstrap media query.

_media_debug.scss

// Debugging for media queries
#media-debug {
  position: fixed;
  left: 0;
  bottom: 20px;
  color: #000;
  font-weight: bold;
  padding: 2px 5px;
  z-index: 1001;
}

@media (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
  #media-debug { background-color: #00f000; }
  #media-debug::after { content: "Mobile (XS)"; }
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
  #media-debug { background-color: #00d000; }
  #media-debug::after { content: "Tablet (SM)"; }
}

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
  #media-debug { background-color: #00b100; }
  #media-debug::after { content: "Desktop (MD)"; }
}

@media (min-width: $screen-lg-min) {
  #media-debug { background-color: green; }
  #media-debug::after { content: "Large (LG)"; }
}