реагировать-гладко в boostrap-grid при разрешении экрана менее 576 пикселей

Я использую React-Slick и Bootstrap Grid. jquery не подключен - используются только файлы scss bootstrap 4 (scss/bootstrap-grid.scss и scss/utilities/_sizing.scss). Слайды расположены внутри контейнеров сетки:

<div className = "container">
  <div className = "row">
    <div className = "col-12">
      <Slider {... slickSettings}>
        <div className = "slider__slide">
          <div className = "row">
            <div className = "col-12">
              <div className = "row">
                <div className = "col-3">
                  left 1
                </ div>
                <div className = "col-9">
                  right 1
                </ div>
              </ div>
            </ div>
          </ div>
        </ div>
        <div className = "slider__slide">
          <div className = "row">
            <div className = "col-12">
              <div className = "row">
                <div className = "col-5">
                  left 2
                </ div>
                <div className = "col-7">
                  right 2
                </ div>
              </ div>
            </ div>
          </ div>
        </ div>
      </ Slider>
    </ div>
  </ div>
</ div>

При разрешении экрана меньше 576 пикселей возникает проблема - ширина слайдов внутри слайдера становится огромной - 4473890 пикселей. Проблема решается заменой строки

$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px);

on

$container-max-widths: (xs: 320px, sm: 540px, md: 720px, lg: 960px, xl: 1140px);

в файле конфигурации начальной загрузки scss. Это решение неверно, так как контейнер с шириной экрана менее 576 пикселей имеет фиксированную ширину 320 пикселей.