Use CSS-defined media breakpoints in JS without matchMedia

mq.html

<div class="mq">
    <div class="mq__xs"></div>
    <div class="mq__sm"></div>
    <div class="mq__md"></div>
    <div class="mq__lg"></div>
</div>

mq.js

if ($('.mq__xs').is(':visible')) {
  console.log('xs');
}

if ($('.mq__sm').is(':visible')) {
  console.log('sm');
}

if ($('.mq__md').is(':visible')) {
  console.log('md');
}

if ($('.mq__lg').is(':visible')) {
  console.log('lg');
}

mq.scss

.mq {
  > * {
    display: none;
  }

  &__xs {
    @media (max-width: $screen-xs-max) {
      display: block;
    }
  }

  &__sm {
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
      display: block;
    }
  }

  &__md {
    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
      display: block;
    }
  }

  &__lg {
    @media (min-width: $screen-lg-min) {
      display: block;
    }
  }
}