разбиение на страницы: как сделать еe адаптивной

У меня постраничная разбивка, как сделать так, чтобы при касании границ страницы, страница не масштабировалась, а сама разбивка на страницы падала по кусочкам вниз

<ul class="my__pagination">
  <li class="my__prev"><a href="index.php?all_questions&amp;&amp;page=1">Prev</a></li>
  <li class="my__page"><a href="index.php?all_questions&amp;&amp;page=1">1</a></li>                                                       
  <li class="my__currentpage"><a href="index.php?all_questions&amp;&amp;page=2">2</a></li>
  <li class="my__page"><a href="index.php?all_questions&amp;&amp;page=3">3</a></li>                                                       <li class="my__next"><a href="index.php?all_questions&amp;&amp;page=3">Next</a></li>
</ul>

.my__pagination {
    list-style-type: none;
    padding: 10px 0;
    display: inline-flex;
    justify-content: space-between;
    box-sizing: border-box;
}

.my__pagination li {
    box-sizing: border-box;
    padding-right: 10px;
}

.my__pagination li a {
    box-sizing: border-box;
    background-color: #e2e6e6;
    padding: 8px 12px;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    color: #616872;
    border-radius: 4px;
    transition: all 0.3s ease-out;
}

.my__pagination li a:hover {
    background-color: #d4dada;
}

.my__pagination .my__next a, .my__pagination .my__prev a {
    text-transform: uppercase;
    font-size: 12px;
}

.my__pagination .my__currentpage a {
    background-color: #518acb;
    color: #fff;
}

.my__pagination .my__currentpage a:hover {
    background-color: #518acb;
}