React, невозможно сделать строку отзывчивой, используя bootstrap

Question

У меня есть строка, которая представляет собой набор столбцов, она правильно отображается в широкоэкранном режиме, но есть проблема с экраном мобильного устройства. Я пробовал использовать col-sm-, но это не сработало. пожалуйста, помогите мне решить эту проблему

Вид рабочего стола:

Has you can see in the above image, all the elements in the same line but when in switch to mobile the elements are divided into 2 rows.

MobileView:

I want the row to adjust itself in a single line

My code

   1    Имя пользователя    10 баллов    

CSS код

.leaderBoard_main {
  background-color:#0092FF;
  border-radius: 10px;
}

.leaderBoard_1 {
  color: white;
  border-right: 5px solid white;
}
.leaderBoard_2 {
  color: white;
}
.leaderBoard_22 {
  width: 25px;
  height: 25px;
}
.leaderBoard_3 {
  color: white;
}

.leaderBoard_4 {
  color: white;
  border-left: 5px solid white;
}

Answer 1

Проблема заключается в дополнительном поле, добавленном классом строки. Попробуйте добавить в строку класс «no-gutters»:

<div class="row no-gutters leaderBoard_main p-2 m-3">
</div>

Чтобы центрировать текст по вертикали, добавьте в их контейнеры классы d-flex и align-items-center, например:

<div class="col-1 leaderBoard_1 d-flex align-items-center">
  <h4>1</h4>
</div>

(То же самое для div с классами leaderBoard_2 и 3)