Hi ramco1917,
col = Column
sm = small screens
xl = extra large screens
The numbers (1-12) represent a portion of the total width of any div
all divs are divided into 12 columns.
So, col-*-6 spans 6 of 12 columns (half the width), col-*-12 spans 12 of 12 columns (the entire width), etc.
The d-flex class is used to create a simple flexbox container.
For d-sm-flex flex-sm-wrap refer below link.
https://getbootstrap.com/docs/4.3/utilities/flex/