Responsividade do Navbar com bootstrap para tablet

Galera, alguém pode me ajudar aqui? Eu estou fazendo um projetinho aqui, e coloquei a navbar responsiva com botao dropdown utilizando o bootstrap. Só que a responsividade do menu funciona para mobile e desktop. Quando eu vou editar para a tela de tablets eu preciso que o menu apareça 3 itens da lista e o resto continua dentro de um botao dropdown. Como eu faço isso?

Nossa história (current)
Produtos
News
Parceiros
Contato
Representantes e distribuidores

                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <img src="./img/Vetor_lupa.svg" alt="Icone de lupa">
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <nav class="navbar navbar-light bg-light">
                        <form class="form-inline">
                          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                        </form>
                      </nav>
                  </div>
                </li>
              </ul>
            </div>
          </nav>
    </section>

Mergulhe em programação