JQuery + Bootstrap 3 - Responsive Breakpoint body classes

index.js

function addResponsivePixelToBody()
{
	$('body').append('<div id="xs-res" class="hidden-sm hidden-md hidden-lg"></div><div id="small-res" class="hidden-md hidden-xs hidden-lg"></div><div id="medium-res" class="hidden-sm hidden-xs hidden-lg"></div><div id="large-res" class="hidden-sm hidden-xs hidden-md"></div><div class="col-sm-12 col-md-4 text-center">');
}
function responsiveBreakpoints()
{
	var xs = $('#xs-res');
	var small = $('#small-res');
	var med = $('#medium-res');
	var large = $('#large-res');
	var body = $('body');

	if(xs.is(':visible')) {
		body.addClass('bootstrap-xs').removeClass('bootstrap-small').removeClass('bootstrap-medium').removeClass('bootstrap-large');
	}
	if(small.is(':visible')) {
		body.addClass('bootstrap-small').removeClass('bootstrap-medium').removeClass('bootstrap-large').removeClass('bootstrap-xs');
	}

	if(med.is(':visible')) {
		body.addClass('bootstrap-medium').removeClass('bootstrap-small').removeClass('bootstrap-large').removeClass('bootstrap-xs');
	}

	if(large.is(':visible')) {
		body.addClass('bootstrap-large').removeClass('bootstrap-small').removeClass('bootstrap-medium').removeClass('bootstrap-xs');
	}
}

$(document).ready(function() {
	addResponsivePixelToBody();
	responsiveBreakpoints(); // if needed to change class on resize, you should also call this function with a debouncer/throttler
});