Watch responsive layout changes with the help of an additional element in the body and an appropriate color setting.

jquery.layoutchanged.css

@media screen and (min-width: ...) {
	// Adjust the breakpoint identifier so that jQuery knows about it
	#bp {
		color: rgb(1, 1, 1);
	}
}

@media screen and (min-width: ...) {
	// Adjust the breakpoint identifier so that jQuery knows about it
	#bp {
		color: rgb(2, 2, 2);
	}
}

...

jquery.layoutchanged.js

// Watch responsive breakpoints
var bp = false;
$(window)
	.on("resize", function () {
		var identifier = $("#bp"),
			new_bp = false;
		if (identifier.length == 0) {
			$("body").append('<div id="bp"/>');
			identifier = $("#bp");
		}
		var color = identifier.css("color");
		for (var i = 0; i <= 9; i++) {
			var rgb = 'rgb(' + i + ', ' + i + ', ' + i + ')';
			if (color == rgb) {
				new_bp = i;
			}
		}
		if (new_bp != bp) {
			$(window).trigger("layoutchanged", { new_bp: new_bp, old_bp: bp });
			bp = new_bp;
		}
	})
	.trigger("resize");