Bootstrap Responsive Debugging

debug.html

<div id="u-debug-size">
    <div id="u-debug-size__inner"></div>
</div>

debug.scss

#u-debug-size {
    z-index: 100000;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    display: block;
}

#u-debug-size__inner {
    position: absolute;
    bottom: 0;
    left: 0;
}

#u-debug-size__inner {
    padding: 10px;
}

@media (max-width: $screen-xs-max) {
    #u-debug-size__inner {
        color: darken(red, 30%);
        background: lighten(red, 40%)
    }

    #u-debug-size__inner::before {
        content: 'x-small';
    }
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    #u-debug-size__inner {
        color: darken(orange, 30%);
        background: lighten(orange, 40%)
    }

    #u-debug-size__inner::before {
        content: 'small';
    }
}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    #u-debug-size__inner {
        color: darken(yellow, 30%);
        background: lighten(yellow, 40%)
    }

    #u-debug-size__inner::before {
        content: 'medium';
    }
}
@media (min-width: $screen-lg-min) {
    #u-debug-size__inner {
        color: darken(blue, 30%);
        background: lighten(blue, 40%)
    }

    #u-debug-size__inner::before {
        content: 'large';
    }
}