1. When a cell is defined as:

<div class= "col-4 col-sm-2 col-md-4"> ... </div>

For small screens, the cell is taking 2/12th of the width (as per col-sm-2).

2. But when a cell is defined as:

<div class= "col-4 col-sm col-md-4"> ... </div>

For small screens, the cell is taking 4/12th of the width (as per col-4).

I understand the first case, but not the second.
Why “col-sm” is not getting considered in second case for small screens?

I know that col-4 means 4/12th of the width for all screen size.
But in the first case, for small screens, col-4 got overridden by col-sm-2, then why not in second case col-4 got overridden by col-sm for small screens?

I feel if “col-sm” would have been considered, the width of the cell would be taken as col, for small screens (i.e. entire remaining space of the row).