Responsive

@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-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

@include media-breakpoint-between(md, xl) { ... }

/* Usage */
@include xs { ... }
@include sm { ... }
@include sm-more { ... }
@include sm-less { ... }
@include md { ... }
@include md-less { ... }
@include md-more { ... }
@include lg { ... }
@include lg-less { ... }
@include lg-more { ... }
@include xl { ... }
@include xl-less { ... }
@include xl-more { ... }
@include xxl { ... }

// RESPONSIVE / BREAKPOINTS
// ------------------------------
$screen-xs-min:             0;
$screen-sm-min:             36rem; //#{576/$rem-base}rem;    // 576px;
$screen-md-min:             48rem; //#{768/$rem-base}rem;    // 768px;
$screen-lg-min:             62rem; //#{992/$rem-base}rem;    // 992px;
$screen-xl-min:             75rem; //#{1200/$rem-base}rem;   // 1200px;
$screen-xxl-min:            87.5rem; //#{1400/$rem-base}rem;   // 1400px;
$screen-xs-max:             35.98rem; //#{575/$rem-base}rem;    // 575px;
$screen-sm-max:             47.98rem; //#{767/$rem-base}rem;    // 767px;
$screen-md-max:             61.98rem; //#{991/$rem-base}rem;    // 991px;
$screen-lg-max:             74.98rem; //#{1199/$rem-base}rem;   // 1199px;
$screen-xl-max:             87.48rem; //#{1399/$rem-base}rem;   // 1399px;
$screen-xxl-max:            100%;