Bootstrap responsive helper/

style.scss

body{
  // Dev tool, remove once done! //
  @include media('xs') {
    &::before{
      content: "xs";
      position: fixed;
      top: 0px;
      height: 20px;
      width: 100%;
      background-color: #D9B504;
      color: $white;
      z-index: 999999999999;
      opacity: 0.5;
      text-align: center;
      font-weight: bold;
    }
  }
  @include media('sm') {
    &::before{
      content: "sm";
      position: fixed;
      top: 0px;
      height: 20px;
      width: 100%;
      background-color: #F29F05;
      color: $white;
      z-index: 999999999999;
      opacity: 0.5;
      text-align: center;
      font-weight: bold;
    }
  }
  @include media('md') {
    &::before{
      content: "md";
      position: fixed;
      top: 0px;
      height: 20px;
      width: 100%;
      background-color: #D97904;
      color: $white;
      z-index: 999999999999;
      opacity: 0.5;
      text-align: center;
      font-weight: bold;
    }
  }
  @include media('lg') {
    &::before{
      content: "lg";
      position: fixed;
      top: 0px;
      height: 20px;
      width: 100%;
      background-color: #BF0404;
      color: $white;
      z-index: 999999999999;
      opacity: 0.5;
      text-align: center;
      font-weight: bold;
    }
  }
  @include media('xl') {
    &::before{
      content: "xl";
      position: fixed;
      top: 0px;
      height: 20px;
      width: 100%;
      background-color: #730202;
      color: $white;
      z-index: 999999999999;
      opacity: 0.5;
      text-align: center;
      font-weight: bold;
    }
  }
}

// Additional mixin for getting the sizes. //

$breakpoint: (
  xs: 575px,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

@mixin media($break) {
	$value: map-get($breakpoint, $break);
	$xs: map-get($breakpoint, 'xs');

	@if $value == $xs {
		@media (max-width: $value) {
			@content;
		}
	}
	@else {
		@media (min-width: $value) {
			@content;
		}
	}
}