Для задания сетки средствами Bootstrap в файлах SASS (SCSS) необходимо указывать следующие запросы.
При desctop first:
@include media-breakpoint-down(xxl) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(sm) { ... }
нативно:
// 4K
@media (max-width: 8000px){}
// 2K
@media (max-width: 2560px){}
// FHD
@media (max-width: 1920px){}
// XXL
@media (max-width: 1399.98px){}
// XXL
@media (max-width: 1199.98px){}
// XXL
@media (max-width: 991.98px){}
// XXL
@media (max-width: 767.98px){}
// XXL
@media (max-width: 575.98px){}
// MOBILE
@media (max-width: 480px){}
// OLD MOBILE
@media (max-width: 400px){}
При mobile first:
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ...
нативно:
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
Для задания определенной точки:
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }
Для задания промежутка:
@include media-breakpoint-between(md, xl) { ... }