JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<ul class="pagination">
  <li class="arrow unavailable"><a href="">&laquo;</a></li>
  <li class="current"><a href="1">1</a></li>
  <li><a href="2">2</a></li>
  
  <li class="arrow ShowForSmall"><a href="3">&raquo;</a></li>
  <span class="HideForSmall">
  <li><a href="3">3</a></li>
  <li><a href="4">4</a></li>
  <li><a href="5">5</a></li>
  <li><a href="6">6</a></li>
  <li class="arrow"><a href="7">&raquo;</a></li>
  </span>
</ul>
</div>

CSS

li {
  list-style: none;
  display: inline-block;
}

.ShowForSmall {
  display: none;
}

@media only screen and (max-width: 600px) {
  .ShowForSmall {
    display: inline;
  }
  .HideForSmall {
    display: none;
  }
}
<