Block to HTML and Javascript to detect bootstrap 4 media breakpoints.

detect-mediabreak.html

<span id="mq-detector" class="invisible">
    <span id="size-xs" class="d-none d-sm-block"></span>
    <span id="size-sm" class="d-sm-none d-md-block"></span>
    <span id="size-md" class="d-md-none d-lg-block"></span>
    <span id="size-lg" class="d-lg-none d-xl-block"></span>
    <span id="size-xl" class="d-xl-none"></span>
</span>

<script>
    $(function() {
    var currSize = undefined;

    var mqDetector = $("#mq-detector");

    var mqSelectors = [
        mqDetector.find(".d-none"),
        mqDetector.find(".d-sm-none"),
        mqDetector.find(".d-md-none"),
        mqDetector.find(".d-lg-none"),
        mqDetector.find(".d-xl-none")
    ];

    var checkForResize = function() {
        for (var i = 0; i <= mqSelectors.length; i++) {
            if (!mqSelectors[i].is(":visible")) {
            currSize = mqSelectors[i < 1 ? 0 : i-1].attr("id");            
            break;              
            }
        }
    };

    $(window).on('resize', checkForResize);

    checkForResize();

    if (currSize == 'size-xs') {
        //Do something good on XS size
    } 
    
</script>