col-n overrides col-sm but not col-sm-n for small screens

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?

After doing few hit and trials, I found that col-abc-n will override col-xyz. Even if xyz is larger than abc.

For example, if a column is defined as:

<div class= "col-md-5 col-lg"> ... </div>

Even if col-lg generally means col-lg-12, for large screens (or extra large screens), width will be given according to col-md-5 and not col-lg.

But if the column was defined as:

<div class= "col-md-5 col-lg-12"> ... </div>

For large or extra large screen, column will get width according to col-lg-12, i.e. 12/12 th width of the row.