div.debug{
    position: fixed;
    top:0px;
    left:0px;
    padding: 10px;
}
/* Pantallas muy grandes  (desktops de más de 1200px de ancho) */
@media (max-width: 240577px) {
    div.debug{
        display: block;
        background-color: black;
        color: white;
    }
    div.debug:before{
        content: "X > 1200px"
    }

}
/*Pantallas grandes (desktops de menos de 1200px) */
@media (max-width: 1199.98px) {
    div.debug:before{
        content: "1200px > X > 992px";
    }

}

/* Pantallas medianas (tablets de menos de 992px) */
@media (max-width: 991.98px) {
    div.debug:before{
        content: "992px > X > 768px";
    }

}
/* Pantallas pequeñas (móviles en landscape de menos de 768px) */
@media (max-width: 767.98px) {
    div.debug:before{
        content: "768px > X > 576px";
    }
}

/* Pantallas muy pequeñas (móviles en portrait de menos de 576px) */
@media (max-width: 575.98px) {
    div.debug:before{
        content: "576px > X > 480px";
    }

}

/* Pantallas muy pequeñas (móviles en portrait de menos de 480px) */
@media (max-width: 479.98px) {
    div.debug:before{
        content: "480px > X > 360px";
    }

}

/* Pantallas muy muy pequeñas (móviles en portrait de menos de 360px) */
@media (max-width: 360.98px) {
    div.debug:before{
        content: "X < 360px";
    }

}