How do I align columns from two different rows and categorize them using a filter?

I’m using java script to hide my content so that it doesn’t appear all at once, but in order for it to work, I had to create two separate rows, which means that if two columns have the same filter category, they won’t align on the same row. Is there a way to fix this? Any assistance or advice would be greatly appreciated.

function toggleText() {
    var showMoreText = document.getElementById("more");
    var buttonText = document.querySelector("#moreButton span");
    var moreIcon = document.querySelector("#moreButton img");

    if (startpoint.style.display === "none") {
        showMoreText.style.display = "none";
        startpoint.style.display = "table-cell";
        buttonText.innerHTML = "Show More";
        buttonText.classList.remove('less');
        moreIcon.classList.remove('less');
    } else {
        showMoreText.style.display = "table-cell";
        startpoint.style.display = "none";
        buttonText.innerHTML = "Show Less";
        buttonText.classList.add('less');
        moreIcon.classList.add('less');
    }
}

.pink{
  color: #FF7B5F;
}

#more {
  display: none;
}
#moreButton{
  background-color:transparent;
  border-color: transparent;
}
.less{
  color: #FF7B5F;
}

img.more.less {
  transform: rotate(180deg);
}


.list-inline-item{
  font-family: 'Inter', sans-serif;
  color: #6F727B;
  font-weight: bold;
  padding: 13px;
}
.list-inline-item.active{
  color: #FF7B5F;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.list-inline-item:hover{
  color: #FF7B5F;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
      <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
      <!-- Favicon icon -->
   </head>
   <body>
    <div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-12 col-md-12 col-lg-12">
   <ul>
      <li class="list-inline-item active" data-filter="all">ALL WORKS</li>
      <li class="list-inline-item" data-filter="1">1</li>
      <li class="list-inline-item" data-filter="2">2</li>
      <li class="list-inline-item" data-filter="3">3</li>
      <li class="list-inline-item" data-filter="4">4</li>
      <li class="list-inline-item" data-filter="5">5</li>
      <li class="list-inline-item" data-filter="6">6</li>
   </ul>
</div>
<div class="clients 4 col-6 col-md-4 col-lg-3">
   <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="clients 1 2 col-6 col-md-4 col-lg-3">
   <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="clients 2 4 col-6 col-md-4 col-lg-3">
   <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="clients 3 6 col-6 col-md-4 col-lg-3">
   <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
           
            <div id="startpoint"></div>
            <div id="more">
               <div class="row">
                <div class="clients 4 col-6 col-md-4 col-lg-3">
   <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="clients 1 2 col-6 col-md-4 col-lg-3">
   <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="clients 2 4 col-6 col-md-4 col-lg-3">
   <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="clients 3 6 col-6 col-md-4 col-lg-3">
   <img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
               </div>
            </div>
            <button onclick="toggleText()" id="moreButton">
            <span class="pink">Show More</span> 
            <img class="more" src="./images/load-more.png" alt="">
            </button>
         </div>
      </div>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

     
      <script>$(document).ready(function (){$('.list-inline-item').click(function(){const value = $(this).attr('data-filter');if(value == 'all'){$('.clients').show('1000');}else{ $('.clients').not('.'+value).hide('1000');$('.clients').filter('.'+value).show('1000');}$(this).addClass('active').siblings().removeClass('active')})})</script>
   </body>
</html>