.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media only screen and (max-width: 767px) {
    .mobile-only {
        display: block;
    }
    .desktop-only {
        display: none;
    }
}


/*by component*/

@media only screen and (min-width: 768px) {
    .mobile {
        display: none;
    }
    .tablet {
        display: none;
    }
    .desktop {
        display: block;
    }
}

@media only screen and (max-width: 767px) {
    .mobile {
        display: none;
    }
    .tablet {
        display: block;
    }
    .desktop {
        display: none;
    }
}

@media only screen and (max-width: 575px) {
    .mobile {
        display: block;
    }
    .tablet {
        display: none;
    }
    .desktop {
        display: none;
    }
}