How to add custom breakpoint in Bootstrap 4?

Question

css

Hello.
I'm trying to figure out the bootstrap. There are several standard ranges: col-, col-sm, col-md, col-lg, col-xl.
In the media queries, I added another range from 414 to 576px. It's in the standard extra-small range of 320px to 576px, but blocks should behave differently: 320px to 414px are stacked on top of each other, while 414px to 576px are next to each other.
How to do it?)

Answer 1

Connect sass version of bootstrap
Copy variables from _variables.scss and override before connecting bootstrap itself
https://github.com/twbs/bootstrap/blob/master/scss...

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
);
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Answer 2

hm?

@media (min-width: 320px) and (max-width: 413px) {
    /* стили */
}
@media (min-width: 414px) and (max-width: 575px) {
    /* другие стили*/
}