My Bootstrap 4 responsive column layout not working

Question

So I made a very simple responsive website layout using Bootstrap 4 so according to the code the no of columns should become 4 when it enters tablet mode ie when the viewport is

Answer 1

Unlike Bootstrap 3, Bootstrap 4 has a bit different grid system. Here sm starts to act since <768px. and the xs breakpoint now is just col. Here, rewritten a bit.

  

    

      col
    
    

      col
    
    

      col
    
    

      col
    
    

      col
    
    

      col