Сделать столбец таблицы фиксированным, когда устройство маленькое в Bootstrap 4

Question

Я использую Bootstrap 4 Table для создания таблицы.

<div class="col-12">
      <table class="table">
        <thead>
          <tr id="mes">
            <th scope="col">column 1</th>
            <th scope="col">column 2</th>
            <th scope="col">column 3</th>
            <th scope="col">column 4</th>
            <th scope="col">column 5</th>
            <th scope="col">column 6</th>
            <th scope="col">column 7</th>
            <th scope="col">column 8</th>
            <th scope="col">column 9</th>
            <th scope="col">column 10</th>

          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row" style="">Name 1</th>
            <td class="table-success">OKAY</td>
            <td class="table-success">OKAY</td>
            <td class="table-success">OKAY</td>
            <td class="table-success">OKAY</td>
            <td class="table-success">OKAY</td>
            <td class="table-success">OKAY</td>
          </tr>
          <tr>
            <th scope="row">Name 2</th>
          </tr>
          <tr>
            <th scope="row">Name 3</th>
          </tr>
          <tr>
            <th scope="row">Name 4</th>
            <td class="table-success">OKAY</td>
            <td class="table-success">OKAY</td>
            <td class="table-success">OKAY</td>
          </tr>
        </tbody>
      </table>
    </div>

Я пытаюсь сделать первый столбец фиксированным, когда экран маленький (как у смартфонов). Если пользователь прокручивает вниз / вверх, прокручивается и первый столбец. Но если пользователь прокручивает влево / вправо, первый столбец будет зафиксирован, а остальные прокрутятся. Кто-нибудь может мне помочь?

Я пытался объяснить наилучшим образом, надеюсь, вы поняли

Извините, мой плохой английский