Strange bootstrap col-xs-* behaviour

See more:

bootstrap

I have the following html code :

<div class="row">
            <div class="col-xs-12 col-sm-2 col-md-6  col-lg-1" > Col 1 </div>
            <div class="col-xs-12 col-sm-2 col-md-6  col-lg-1"> Col 2 </div>
            <div class="col-xs-12 col-sm-2 col-md-6  col-lg-1"> Col 3 </div>
            <div class="col-xs-12 col-sm-2 col-md-6  col-lg-3"> Col 4 </div>
            <div class="col-xs-12 col-sm-2 col-md-6  col-lg-3"> Col 5 </div>
            <div class="col-xs-12 col-sm-2 col-md-6  col-lg-3"> Col 6 </div>
</div>

As long as I resize the page to md and sm, everything goes as expected. If I go down to xs, I am getting all the "Col 1" , "Col 2", ...,"Col 6" all lined up in the same row, one after the other .... shouldn't they be stacked one upon the other as if each one were a single line instead ? or is there something I am getting wrong ?

I am using Bootstrap 4.3.1

Thank you.

What I have tried:

tried changing to col-xs-8, col-xs-6 for all the rows