Responsive grid break on smaller screen bootstrap 4

Question

I currently have a Bootstrap 4 (beta) grid set up such that it displays 3 icons and then 2 icons in >sm screens, and on xs-screens it goes down to 2x2x1.

I achieve this by marking each column . However, is there a way to make each column col-sm-3 (i want them to be smaller) and force the remaining icons to be on a new row, but also have them stack 2x2x1 on xs screens?

WHAT I HAVE:

<div id="Customers" class = "container-fluid customersBlock">
  <div class = "row justify-content-center">
    <div class = "col-sm-4 col-6">
          IMG 1
    </div>
    <div class = "col-sm-4 col-6"">
         IMG 2
    </div>
    <div class = "col-sm-4 col-6">
          IMG 3
    </div>
  <div class = "col-sm-4 col-6">
         IMG 4
    </div>
    <div class = "col-sm-4 col-6">
         IMG 5
    </div>
</div>
</div>

WHAT I WANT:

<div id="Customers" class = "container-fluid customersBlock">
  <div class = "row justify-content-center">
    <div class = "col-sm-3 col-6">
          IMG 1
    </div>
    <div class = "col-sm-3 col-6"">
         IMG 2
    </div>
    <div class = "col-sm-3 col-6">
          IMG 3
    </div>

~~ Some way to force columns to next line on >small screens
But on XS Screens still have them stack 2x2x1 ~~

  <div class = "col-sm-3 col-6">
         IMG 4
    </div>
    <div class = "col-sm-3 col-6">
         IMG 5
    </div>
</div>
</div>