Bootstrap Responsive Indicator

responsive.css

.responsive-indicator {
  font-family: "Input Sans", Verdana, sans-serif;
  padding: 2px 4px;
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 9999;
  opacity: 0.9;
  background-color: rgba(0,0,0,0.2);

  @media #{$xs}{
    .display-xs {display:inherit;}
    .display-sm {display:none;}
    .display-md {display:none;}
    .display-lg {display:none;}
    .display-xl {display:none;}
  }
  @media #{$sm}{
    .display-xs {display:none;}
    .display-sm {display:inherit;}
    .display-md {display:none;}
    .display-lg {display:none;}
    .display-xl {display:none;}
  }
  @media #{$md}{
    .display-xs {display:none;}
    .display-sm {display:none;}
    .display-md {display:inherit;}
    .display-lg {display:none;}
    .display-xl {display:none;}
  }
  @media #{$lg}{
    .display-xs {display:none;}
    .display-sm {display:none;}
    .display-md {display:none;}
    .display-lg {display:inherit;}
    .display-xl {display:none;}
  }
  @media #{$xl}{
    .display-xs {display:none;}
    .display-sm {display:none;}
    .display-md {display:none;}
    .display-lg {display:none;}
    .display-xl {display:inherit;}
  }
}

responsive.html

<div class='responsive-indicator'>
  <div class='display-xs'>xs</div>
  <div class='display-sm'>sm</div>
  <div class='display-md'>md</div>
  <div class='display-lg'>lg</div>
  <div class='display-xl'>xl</div>
</div>