(Включить изображение) Показать / скрыть DIV с использованием нумерации bootstrap

Question

Я хочу показать / скрыть, используя нумерацию Bootstrap. Код ниже.

<div class="col-lg-3"></div>

<div class="row mt-3">

<--! 1 page -->
  <div class="row col-lg-9"></div>

<--! 2 page -->
  <div class="row col-lg-9"></div>

<--! 3 page -->
  <div class="row col-lg-9"></div>

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

В итоге: 1. загрузите 3 DIV на одном сайте. 2. изменить DIVs, используя нумерацию страниц. Чтобы помочь понять, я сделал несколько снимков. пожалуйста, посмотрите.

Спасибо.