Twitter Bootstrap - how to detect when media queries starts

Question

which is the fastest and easy way to fire when bootstrap-responsive.css media queries go in action?

go in action = when you resize window to mobile width and site is

Answer 1

here is my solution for bootstrap 4, based on @falsarella idea

*note: use "full page" option below for test this snippet, otherwise it will return wrong screen type, based on snippet iframe size

/**
 * @returns STRING current screen type like: xs, sm, md, lg or xl
 */
function getScreenType() {

  !function initHelpers() {
    if ($('div.mq-detector').length !== 0) return;
    $('body').append(_mqDetector());
    // helpers
    function _mqDetector() {
      return `
      

        

        

        

        

        

      
      `;
    }
  }();

  // @then

  return $('div.mq-detector').children().filter(':visible').data('type');

}

console.log(getScreenType())