<div class="container">
    <div class="page-header">
    <h1>JavaScript if statements based on Bootstrap 3 media queries</h1>
      <p>Resize the window to see the text below changed with js</p>
      <h2></h2>
  </div><!--  /page-header  -->

</div>
/* Jacob Lett - https//BootstrapCreative.com - Reference / Refresh / Repetition */
$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready

 // Add some invisible elements with Bootstrap CSS visibile utility classes
$( "body" ).append( "<div style='visibility:hidden;' class='viewport-check'><span class='visible-xs-block'></span><span class='visible-sm-block'></span><span class='visible-md-block'></span><span class='visible-lg-block'></span></div>" );

// Checks if the span is set to display blcok via CSS
function checkIfBlock (target) {
    var target = $(target).css('display') == 'block';
    return target;
}

// Set some variables to use with the if checks below
var mediaQueryXs = checkIfBlock('.viewport-check .visible-xs-block');
var mediaQuerySm = checkIfBlock('.viewport-check .visible-sm-block');
var mediaQueryMd = checkIfBlock('.viewport-check .visible-md-block');
var mediaQueryLg = checkIfBlock('.viewport-check .visible-lg-block');

// Debug
console.log("extra small " + mediaQueryXs);
console.log("small " + mediaQuerySm);
console.log("medium " + mediaQueryMd);
console.log("large " + mediaQueryLg);

// Now check if the media query is enabled then add a unique class to the body tag

// Are you extra-small?
if ( mediaQueryXs == true ) {
        $("body").toggleClass( "media-query-xs" );
  $("h2").text( "media-query-xs" );
}

// Are you small?
if ( mediaQuerySm == true ) {
        $("body").toggleClass( "media-query-sm" );
   $("h2").text( "media-query-sm" );
}

// Are you medium?
if ( mediaQueryMd == true ) {
        $("body").toggleClass( "media-query-md" );
   $("h2").text( "media-query-md" );
}

// Are you large?
if ( mediaQueryLg == true ) {
        $("body").toggleClass( "media-query-lg" );
   $("h2").text( "media-query-lg" );
} 
  
  
// Reload demo on  window resize
$( window ).resize( function(){

this.location.reload();

});  
  
  
  
// document ready  
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js