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

I have revised codes in this link to Bootsrap 4 not alpha or beta. Codes as below;

    /* **********************************************************
        Detect bootrap 4 media query type
        https://getbootstrap.com/docs/4.0/utilities/display/
   ********************************************************** */


    $("body").append("
xssmmdlgxl
");

    var Bootstrap4MediaQuery = "";

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

    if(FnDetectMediaQuery('.viewport-check .d-block') == true)
    {
        Bootstrap4MediaQuery = "xs";
    }
    else if(FnDetectMediaQuery('.viewport-check .d-sm-block') == true)
    {
        Bootstrap4MediaQuery = "sm";
    }
    else if(FnDetectMediaQuery('.viewport-check .d-md-block') == true)
    {
        Bootstrap4MediaQuery = "md";
    }
    else if(FnDetectMediaQuery('.viewport-check .d-lg-block') == true)
    {
        Bootstrap4MediaQuery = "lg";
    }
    else if(FnDetectMediaQuery('.viewport-check .d-xl-block') == true)
    {
        Bootstrap4MediaQuery = "xl";
    }
    else
    {
        Bootstrap4MediaQuery = "";
    }

    console.log("Bootstrap4MediaQuery: " + Bootstrap4MediaQuery);