Pagination - icon of selected page always in the middle or visible

Question

In my structure, I want to be responsive the selected page always be visible, if possible in the middle of her class and "active", and the other options are hidden, and may appear if the page width is increased

.paginacao {
  max-width: 870px;
  overflow: hidden;
  width: 100%;
  margin: 0px;
  display: inline-flex;
  height: 52px;
}

.paginacao * {
  list-style: none;
  text-decoration: none;
}

.paginacao ul {
  margin: 0px;
  display: inline-flex;
  padding: 0px;
  width: calc(100% - 118px);
}

.inicio,
.fim {
  background: dodgerblue;
  color: #fff;
}

.inicio a,
.fim a {
  color: #fff;
}

.paginacao li {
  font-family: Trebuchet MS, arial;
  font-size: 18px;
  text-decoration: none;
  border-radius: 3px;
  text-align: center;
  height: 20px;
  min-width: 20px;
  margin: 2.5px;
  padding: 12.5px;
  box-shadow: 2px 0px 5px 2px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.paginacao ul li a {
  color: #222;
}

.paginacao ul li.ativo a {
  color: dodgerblue;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<center class="paginacao">
  <li class="inicio">
    <a href="#">
      <<</a>
  </li>
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li class="ativo"><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
    <li><a href="#">13</a></li>
    <li><a href="#">14</a></li>
    <li><a href="#">15</a></li>
  </ul>
  <li class="fim"><a href="#">>></a></li>
</center>

Answer 1

Dude I made this model, but I didn’t really like it no rss... I say this because it is not dynamic enough for my taste, but I found no other way... The trick here is to go "erasing" the nth-child as the screen decreases using @media. That way I got that result:

The code of the image above is this!

nav {
    display:flex;
    justify-content: center;
}
.btns {
    display:flex;
    justify-content: center;
}
.ativo a {
    color: dodgerblue;
}

a {
  font-family: Trebuchet MS, arial;
  font-size: 18px;
  text-decoration: none;
  border-radius: 3px;
  text-align: center;
  margin: 2.5px;
  padding: 12.5px;
  box-shadow: 2px 0px 5px 2px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  color: #222;
}

nav .esq a,
nav .dir a {
    background-color: dodgerblue;
    color: #fff;
    margin: 0;
}
nav .esq,
nav .dir {
    z-index: 2;
}

@media screen and (max-width:500px) {
    .btn:nth-child(1),
    .btn:nth-child(10) {
        display: none;
    }
}
@media screen and (max-width:420px) {
    .btn:nth-child(2),
    .btn:nth-child(9) {
        display: none;
    }
}
@media screen and (max-width:320px) {
    .btn:nth-child(3),
    .btn:nth-child(8) {
        display: none;
    }
}
@media screen and (max-width:300px) {
    .btn:nth-child(4),
    .btn:nth-child(7) {
        display: none;
    }
}

<nav>
    <div class="esq">
        <a href="#"> << </a>
    </div>
    <div class="btns">
        <div class="btn">
            <a href="#">1</a>
        </div>
        <div class="btn">
            <a href="#">2</a>
        </div>
        <div class="btn">
            <a href="#">3</a>
        </div>
        <div class="btn">
            <a href="#">4</a>
        </div>
        <div class="btn">
            <a href="#">5</a>
        </div>
        <div class="btn ativo">
            <a href="#">6</a>
        </div>
        <div class="btn">
            <a href="#">7</a>
        </div>
        <div class="btn">
            <a href="#">8</a>
        </div>
        <div class="btn">
            <a href="#">9</a>
        </div>
        <div class="btn">
            <a href="#">10</a>
        </div>
    </div>
    <div class="dir">
        <a href="#"> >> </a>
    </div>
</nav>