почему офсетная сетка реквизита иногда не работает в реакции-начальной загрузке?

Question

Я сталкиваюсь с частой проблемой в реактивном ботострапе, иногда реквизиты смещения сетки не работают, и у меня работают только нормальные классы начальной загрузки.

код:

<Carousel.Item >
    <div className="item-container d-flex flex-column flex-wrap ">
       {
          this.categories.map(category => {
             return (
               <Card  className="px-2 category__card col-xl-4 col-sm-6">
                  <div className=" car-container" style={category.style}>
                      <Card.Body>
                         <Card.Title className="text-white font-weight-normal text-uppercase ">
                             <h3>
                                {category.title}
                             </h3>
                           </Card.Title>
                          <Button variant="light rounded-0" >View Products</Button>    
                       </Card.Body>
                       <Card.Img variant="bottom" src={category.img} className="card-image"/>


                   </div>  

                 </Card>
               );
            })
          }
     </div>
 </Carousel.Item>

Этот кодработает как я использовал обычные классы начальной загрузки в Card компонент col-xl-4 col-sm-6, но он не работает, когда я удаляю эти классы и использую опцию реагировать на загрузку sm={6} xl={4}

Я могу использовать классы начальной загрузки ибудь счастлив, но мне нужно, чтобы ширина карточек в карусели была динамичной, так почему я задаю вопрос, что может быть причиной того, что эти реквизиты не работают ???