I need to make a grid with 6 columns in full screen that size down to 2 columns on smaller/mobile. Here is what I have tried so far. It looks correct wide, on my laptop, but when smaller, iPhone or tablet, it shows 6 columns still with very tiny images.

live test here https://codepen.io/mlegg10/pen/yzjRya

Code:
<div class="row flex-mb1">
<div class="col-xs-6 col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>

<div class="col-xs-6  col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>

<div class="col-xs-6  col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>

<div class="col-xs-6 col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>
                                                                                                    
  <div class="col-xs-6  col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>                                                                                                  
                                                                                                    <div class="col-xs-6  col-md-2"><a class="thumbnail fancybox" data-fancybox="images" href="original_photos/1.jpg">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="" src="http://ryehome.com/original_photos/1.jpg" /> </div>
                     </a></div>
</div>
<!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix d-none d-sm-block"></div>