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

I hope I understand what you are asking. This should prevent the elements from going to fullscreen before the viewport gets even smaller

  

    col
  
  

    col
  
  

    col
  
  

    col
  
  

    col
  
  

    col
  

just a reminder for breakpoints, the size(sm/lg) specifies the size of the page that the rule applies to. The rule starts with the smallest size and applies to its size and sizes bigger than it that do not have a rule. The default column size is 12, so that does not need to be specified.