To read the current breakpoint tier in JavaScript, employ this CSS:

:root {
  --current-breakpoint-tier: xs;
  
  @media (min-width: $screen-sm-min) {
    --current-breakpoint-tier: sm;
  }
  @media (min-width: $screen-md-min) {
    --current-breakpoint-tier: md;
  }
  @media (min-width: $screen-lg-min) {
    --current-breakpoint-tier: lg;
  }
  @media (min-width: $screen-xl-min) {
    --current-breakpoint-tier: xl;
  }
  @media (min-width: $screen-xxl-min) {
    --current-breakpoint-tier: xxl;
  }
}

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

• We build reliable cloud solutions with Infrastructure as code
• We are experts in security, Linux and databases
• We support your dev team to perform

Read more Show archive.org snapshot

Then use this JavaScript:

// globally
getComputedStyle(document.documentElement).getPropertyValue('--current-breakpoint-tier')

// or locally
getComputedStyle(someElement).getPropertyValue('--current-breakpoint-tier')

If you're using Bootstrap and Sass, you can even do this:

\:root
  @each $name, $min-width in $grid-breakpoints
    @media (min-width: $min-width)
      --current-breakpoint-tier: #{$name}

Hat tip to Arne.