.d-none { display: none; }
.d-flex { display: flex; }

@media (min-width: 576px) {
    .d-sm-none { display: none; }
    .d-sm-flex { display: flex; }
}
@media (min-width: 768px) {
    .d-md-none { display: none; }
    .d-md-flex { display: flex; }
}
@media (min-width: 992px) {
    .d-lg-none { display: none; }
    .d-lg-flex { display: flex; }
}
@media (min-width: 1200px) {
    .d-xl-none { display: none; }
    .d-xl-flex { display: flex; }
}