wannneer ik maak mij scherm medium size het bootsrap grid systeem gaat fout?

Hallo,
ik heb bootstrap geinstalleerd op mij theme en enqueued in functions.php.
ik heb deze code om te testen bootstrap:

<?php
 /*
 Template Name: Full Width
 */
if(is_page(1871)) {
 get_header('reparatie');
}
else {
 get_header();
}
 ?>                 

<div id="primary" class="content-area">
              
		<main id="main" class="site-main"> 
<div class="container" id="repair">
<div class="row">

<article class="col-sm-6 col-md-4 col-lg-2 col-xl-2">
<h5>Reparatie</h5>
</article>

<article class="col-sm-6 col-md-4 col-lg-2 col-xl-2">
<h5>Grote beurt</h5>
</article>

<article class="col-sm-6 col-md-4 col-lg-2 col-xl-2">
<h5>Kleine beurt</h5>
</article>

<article class="col-sm-6 col-md-4 col-lg-2 col-xl-2">
<h5>Olie verversen</h5>
</article>

<article class="col-sm-6 col-md-4 col-lg-2 col-xl-2">
<h5>Wintercheck</h5>
</article>

<article class="col-sm-6 col-md-4 col-lg-2 col-xl-2">
<h5>Zomercheck</h5>
</article>

</div>

</div>
</main>

<?php get_template_part('template-parts/content',  'page' );
 ?>
  
</div>

<?php
get_footer();

nu als i k ga naar mij website pagina url:http://webdesignleren.net/reparatie-ondehoud/
ik zie op 1200 px screen het 6 columns wel van lg-2.
maar wanneer ik ga mij scherm kleiner maken om medium screen te krijgen ik zie dat alles wordt in elkaar gemengd . dus ik krijg niet 3 columns per rij in medium scherm.
what ik doe fout ?
moet ik media queries schrijven om ze in 3 columns te krijgen in medium scherm en i 2 columns in small scherm.
ik had gewerkt met foundation grid system ik had zulke probleem niet ,ik begrijp niet hoe komt dat.
U kunt elf zien op url:http://webdesignleren.net/reparatie-ondehoud/
dank u wel
johannes