Datatable - обернуть содержимое td при меньшем размере экрана

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

На большом размере экрана

при просмотре на небольших экранах (мобильные телефоны), я сворачиваю кнопку действия, которая является предполагаемым действием

при нажатии на строку для просмотра раздела действий, она расширяет размер экрана. Как мне удержать его в пределах размера экрана

js часть

$(document).ready(function() {
  // setup datatable
  $('.main_table').DataTable({
    "paging": false,
    "responsive": true,
    "info": false,
  });
});

html

      <div  class="row">
        <div class="col-lg-12">
          <table class="main_table table table-bordered display nowrap" cellspacing="0" width="100%">
            <thead>
              <tr>
                <th>Name</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              {% for each in teacher_list %}
              <tr>
                <td>{{forloop.counter}}. {{ each }} {% if each.is_superuser %}<span class="badge bg-info">admin</span>{% endif %}</td>
                <td style="word-wrap: break-word;">
                  <br>
                  <a class="btn btn-sm bg-gradient-success" type="button" href="{% url 'teacher_assign_class' each.id %}">assign Class</a>
                  <a class="btn btn-sm bg-gradient-info" type="button" href="{% url 'teacher_make_admin' each.id %}">Make Admin</a>
                  <a class="btn btn-sm bg-gradient-danger" type="button" href="{% url 'teacher_revoke_admin' each.id %}">Revoke Admin</a>

                  <a class="btn btn-sm bg-gradient-warning" type="button" href="{% url 'teacher_edit' each.id %}">Edit Username</a>
                  <a class="btn btn-sm bg-gradient-warning" type="button" href="{% url 'teacher_reset_password' each.id %}">Reset Password</a>
                  <a class="btn btn-sm bg-gradient-danger" type="button" href="#" onclick="throw_warning('Are you sure, you want to delete this Teacher?', action_link='{% url "teacher_delete" each.id %}')">Delete</a>
                </td>                      
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>

 @media (max-width:767px) {
  .page-actions {
    display: flex;
    flex-direction: column;
   }
 }

 @media (max-width:767px) {
  .page-actions {
    column-count: 2;
   }
}