Создайте div перед тремя результатами и закройте его после

Question

Я пытаюсь отобразить список проектов.Три проекта вписываются в один div.И я сталкиваюсь с проблемой.Мне нужно вычесть проект из базы данных, поэтому я создал цикл while.Но после каждых трех проектов мне нужно закрыть div и открыть новый div для следующих трех проектов.

я пробовал цикл for, который выглядит следующим образом

 $total = $resultTotal;
  $i=0;
  for($ii=0;$ii<$total;$ii++){
      $i++;
      if($i % 3 == 1)echo '<div class="card-deck d-block d-md-flex>';
// echo the project
      if($i % 3 == 0)echo "</div>";
  }//end for loop

Эточто я пробовал, и он вернул проект, все перечисленные ниже друг друга.

function displayAllProjectsBoxed() {
  require 'dbh.inc.php';
  $sql = "SELECT * FROM project";
  $stmt = mysqli_stmt_init($conn);
  if (!mysqli_stmt_prepare($stmt, $sql)) {
      header("location: /index.php?error=sqlerror");
      exit();
  } else {
      mysqli_stmt_execute($stmt);
      $result = mysqli_stmt_get_result($stmt);
  }
  $sqltotal = "SELECT * FROM project";
  $stmt = mysqli_stmt_init($conn);
  if (!mysqli_stmt_prepare($stmt, $sqltotal)) {
      header("location: /index.php?error=sqlerror");
      exit();
  } else {
      mysqli_stmt_execute($stmt);
      mysqli_stmt_store_result($stmt);
      $resultTotal = mysqli_stmt_num_rows($stmt);
  }
  $total = $resultTotal;
  $i=0;
  for($ii=0;$ii<$total;$ii++){
      $i++;
      if($i % 3 == 1)echo '<div class="card-deck d-block d-md-flex>';
  while ($projects= mysqli_fetch_assoc($result)) {

      echo '
      <!-- Projects -->
      <div class="card mb-5">
        <div class="card-body p-4">
          <!-- List of Icons -->
          <div class="row justify-content-between align-items-center mb-4">
            <div class="col-6">
              <a class="small text-secondary" href="#">
                <span class="fas fa-bookmark text-primary mr-1"></span>
                FR-52
              </a>
            </div>
            <div class="col-6 text-right">
              <!-- Settings -->
              <div class="position-relative">
                <a id="settingsDropdown1Invoker" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent rounded" href="javascript:;" role="button"
                   aria-controls="settingsDropdown1"
                   aria-haspopup="true"
                   aria-expanded="false"
                   data-unfold-event="click"
                   data-unfold-target="#settingsDropdown1"
                   data-unfold-type="css-animation"
                   data-unfold-duration="300"
                   data-unfold-delay="300"
                   data-unfold-hide-on-scroll="true"
                   data-unfold-animation-in="slideInUp"
                   data-unfold-animation-out="fadeOut">
                  <span class="fas fa-ellipsis-h btn-icon__inner"></span>
                </a>

                <div id="settingsDropdown1" class="dropdown-menu dropdown-unfold" aria-labelledby="settingsDropdown1Invoker" style="min-width: 160px;">
                  <a class="dropdown-item" href="#">
                    <small class="fas fa-cogs dropdown-item-icon"></small>
                    Settings
                  </a>
                  <a class="dropdown-item" href="#">
                    <small class="fas fa-code-branch dropdown-item-icon"></small>
                    Repository
                  </a>
                  <a class="dropdown-item" href="#">
                    <small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
                    Download
                  </a>
                  <a class="dropdown-item" href="#">
                    <small class="fas fa-archive dropdown-item-icon"></small>
                    Archive
                  </a>
                </div>
              </div>
              <!-- End Settings -->
            </div>
          </div>
          <!-- End List of Icons -->

          <div class="text-center">
            <div class="u-lg-avatar mx-auto mb-3">
              <img class="img-fluid rounded-circle" src="../../assets/img/160x160/img4.jpg" alt="Image Description">
            </div>

            <!-- Title -->
            <div class="mb-4">
              <h3 class="h5 mb-1">Mapbox</h3>
              <p class="font-size-1">The time has come to bring those ideas and plans to life.</p>
            </div>
            <!-- End Title -->

            <h4 class="h6 font-weight-normal mb-1">Members</h4>

            <!-- Members List -->
            <ul class="list-inline mb-0">
              <li class="list-inline-item mr-0" data-toggle="tooltip" data-placement="top" title="Patrick Garner">
                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                  <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img1.jpg" alt="Image Description">
                </div>
              </li>
              <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="James Collins">
                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                  <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img2.jpg" alt="Image Description">
                </div>
              </li>
              <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Eliza Donovan">
                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                  <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img3.jpg" alt="Image Description">
                </div>
              </li>
              <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Cler Lockhart">
                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                  <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img5.jpg" alt="Image Description">
                </div>
              </li>
              <li class="list-inline-item ml-n3 mr-0" data-toggle="tooltip" data-placement="top" title="Josephina Mack">
                <div class="u-sm-avatar u-sm-avatar--bordered rounded-circle">
                  <img class="img-fluid rounded-circle" src="../../assets/img/32x32/img4.jpg" alt="Image Description">
                </div>
              </li>
              <li class="list-inline-item ml-n3 mr-0">
                <a class="btn btn-sm btn-icon btn-light rounded-circle" href="#">
                  <span class="btn-icon__inner">+3</span>
                </a>
              </li>
            </ul>
            <!-- End Members List -->
          </div>
        </div>

        <div class="card-footer text-center">
          <!-- Budget & Priority -->
          <div class="row align-items-center">
            <div class="col-6 u-ver-divider">
              <h5 class="small font-weight-normal text-secondary mb-0">Budget</h5>
              <span class="text-dark">$9,145</span>
            </div>
            <div class="col-6">
              <h5 class="small font-weight-normal text-secondary mb-0">Priority</h5>
              <span class="fas fa-arrow-up text-warning small"></span>
              <span class="text-dark">Medium</span>
            </div>
          </div>
          <!-- End Budget & Priority -->
        </div>
      </div>
      <!-- End Projects -->';
          if($i % 3 == 0)echo "</div>";
      }//end for loop
  }
}

Я ожидаю, что выходной цикл будет

<div class="card-deck d-block d-md-flex>
//project card
//project card
//project card
</div>
<div class="card-deck d-block d-md-flex>
//project card
//project card
//project card
</div>