Adds breakpoint into dom via a psuedo element for easy detection.

Author: AMJones

js/breakpoint.js

@@ -1,14 +1,17 @@
 /**
- * Determines which breakpoint is currently active.
+ * Determines which breakpoint is currently active, either by querying for a psuedo element on the body
+ * or by injecting an element with display classes.
  *
  * @returns {jQuery}
  */
 jQuery.fn.extend( {
   isBreakpoint: function ( points ) {
+    var query = window.getComputedStyle(document.querySelector('body'), ':before').getPropertyValue('content') || null;
+    if ( !points.constructor === Array ) { points = [ points ]; }
+    if (null !== query) { return (points.indexOf(query) !== -1); }
     var test  = false;
     var $body = $( 'body' );
     var cls = ' d-none d-sm-none d-md-none d-lg-none d-xl-none';
-    if ( !points.constructor === Array ) { points = [ points ]; }
     $.each( points, function ( index, alias ) {
       if ( !$body.find( '.detect-' + alias ).length ) {
         var tCls = 'detect-' + alias + cls;

scss/_display-mixins.scss

@@ -7,4 +7,9 @@
   .d-#{$criteria}-table-cell   { display: table-cell !important; }
   .d-#{$criteria}-flex         { display: flex !important; }
   .d-#{$criteria}-inline-flex  { display: inline-flex !important; }
+}
+
+@mixin display-responsive($breakpoint) {
+  body::before { content: "#{$breakpoint}"; display: none !important; }
+  @include display($breakpoint);
 }

scss/_display.scss

@@ -3,7 +3,7 @@
 
 @if not($enable-framework) {
 /*!
- * Strapless Display v1.0.2 (http://github.com/strapless/display)
+ * Strapless Display v1.0.3 (http://github.com/strapless/display)
  * Influenced by Bootstrap v4.0 (http://getbootstrap.com)
  * Licensed under MIT (https://github.com/strapless/display/blob/master/LICENSE)
  */
@@ -64,10 +64,10 @@
 @if $enable-framework == false {
   @each $bp, $min in $grid-breakpoints {
     @if $min == 0 {
-      @include display($bp)
+      @include display-responsive($bp);
     } @else {
       @media screen and (min-width: $min) {
-        @include display($bp);
+        @include display-responsive($bp);
       }
     }
   }