Is it possible to do this without repeating one of the blocks?

Question

Bootstrap

I have code

<div class="container-fluid list-group-item-secondary">
  <div class="row">
    <div class="col text-center d-none d-sm-block">
      Текстовый заголовок
    </div>
    <div class="col-auto ms-auto text-center">
      <a href="#">Ссылка 1</a>
    </div>
    <div class="col-auto text-center">
      <a href="#">Ссылка 2</a>
    </div>
    <div class="col-auto text-center">
      <a href="#">Ссылка 3</a>
    </div>
  </div>
  <div class="row d-block d-sm-none">
    <div class="col text-center">
      Текстовый заголовок
    </div>
  </div>
</div>

which implements this behavior

Is it possible to change the code so that the "Text title" block does not repeat, but moves with some Bootstrap (version 5.1) parameters?

Answer 1