Create a view on small screens when clicking on a link

Currently, I have a table and page built using Bootstrap. Here is the code:

<div class="row my-2">
  <div class="col-12 col-md-8">
    <div class="d-md-flex justify-content-between">
      <div>
      <h1 class="text-uppercase">Clients</h1>
    </div>
    <div>
      <input class="form-control-sm bg-dark text-light border-dark me-4" type="text" id="criteria" placeholder="Rechercher" onkeyup="showCustomers();">
    </div>
  </div>
</div>
  <div class="row">
    <div class="col-12 col-md-8">
      <table class="table table-dark table-borderless table-lines">
        <thead>
          <tr>
            <th scope="col">Login</th>
            <th scope="col">Num. Client</th>
            <th scope="col">Date inscription</th>
            <th scope="col">Dernier accès</th>
            <th scope="col">Forfait</th>
            <th scope="col">Crédit</th>

          </tr>
        </thead>
        <tbody id="result">
          <script>
          showCustomers("xxx");
          </script>
        </tbody>
      </table>
    </div>
    <div class="col-12 col-md-4">
      <div id="customerInfos" class="collapse">
        <p>Sélectionnez un client afin d'obtenir les détails et les paramètres associés.</p>
      </div>
    </div>

  </div>

Here is my table loaded :

<tr class="clickable-row <?=$classeStatut?>" data-utiId="<?=$uti_id?>" onclick="showUtilisateur(this);">
  <td data-label="Login">
    <div class="d-flex justify-content-end justify-content-md-start">
      <div>
        <img class="me-2" src="<?=getPP($uti_login)?>" width="20"></img>
      </div>
      <div class="circle <?=$connectionStatus?> d-none d-md-block mt-2 me-1">
      </div>
      <div>
        <?=mhe($uti_login)?>
      </div>
      <?php if ($uti_profil==1) { ?>
        <div>
          <i class="bi bi-shield-check mx-2 text-success"></i>
        </div>
      <?php } ?>
    </div>
  </td>
  <td data-label="# Client"><?=mhe(POSTE_PREFIX . $uti_numposte)?></td>
  <td data-label="Inscrit"><?=mhe(makeFRDate($uti_date_inscription))?></td>
  <td data-label="Dernière co."><?=makeFRDate(mhe($uti_lastaccess))?></td>
  <td data-label="Forfait"><?=mhe($for_nom)?></td>
  <td data-label="Crédit"><span class="<?=$classCredit?>"><?=mhe($uti_credit)?> €</span></td>
</tr>

So when I click on a row of the table, the showUtilisateur() function will be executed and put some infos on the customerInfos div. That works perfectly, but I want to improve the layout of the customerInfos div. On small screens, currently I have to go to the bottom of the page to see the div When I click on a row, I would like to open the div as a new view, and allow to return to the table view with a "back" button. I'm not sure how to define this kind of layout. Thanks for your suggestions