Bootstrap grid layout note

1.  The column with definition is automatically inherited from small class to large class, so if col-sm is defined, md, lg and xml will automatically inherit the column size setting

• .col- (phone - screen width less than 576px)
• .col-sm- (phone in landscape - screen width equal to or greater than 576px)
• .col-md- (Tablet - screen width equal to or greater than 768px)
• .col-lg- (Laptop - screen width equal to or greater than 992px)
• .col-xl- (Desktop - screen width equal to or greater than 1200px)

2. If row is embedded within col, then the col content will be the first row. and the new row will start from second line. The new row width is the width of the parent column width.

3. row can only contain col as sub items.

4. if more than 12 cols are added in a row, it will wrap to a new line after the first 12 cols

5. col with number will automatically share the row width equally

6. col-auto will take up the remaining width

7. if col is  not defined for col or col-xs, then each column will automatically stacked horizontally.