Horror and misunderstanding of bootstrap adaptive wiggle, how does no-gutters work?

Question

Bootstrap

Hello.
It is necessary to make
4 cells in 2 rows on a large resolution
2 cells in 4 rows on an average
, 1 per row in 8 rows on a small
one All cells should be pressed against each other without indents.
Everything except the middle one works. On average, two columns with cells are separated by a gap, as this happens, I don’t understand what to do either. There are no-gutters, why doesn't it work?

<div class="row no-gutters" >

       <div class="col-sm-12  col-md-6 col-xl-3"><img src="../exam1/img/komplexxx.jpg"></div> 
       <div class="col-sm-12  col-md-6 col-xl-3"><img src="../exam1/img/komplexxxt.jpg"></div> 
       <div class="col-sm-12  col-md-6 col-xl-3"><img src="../exam1/img/komplexxx.jpg"></div> 
       <div class="col-sm-12  col-md-6 col-xl-3"><img src="../exam1/img/komplexxxt.jpg"></div> 
       <div class="col-sm-12  col-md-6 col-xl-3"><img src="../exam1/img/komplexxxt.jpg"></div> 
       <div class="col-sm-12  col-md-6 col-xl-3"><img src="../exam1/img/komplexxx.jpg"></div> 
       <div class="col-sm-12  col-md-6 col-xl-3"><img src="../exam1/img/komplexxxt.jpg"></div> 
       <div class="col-sm-12  col-md-6 col-xl-3"><img src="../exam1/img/komplexxx.jpg"></div>  
      </div>

spoiler

Answer 1

It seems to work as it should: CodePen