Bootstrap 5 Grid system Mix and match

Bootstrap 5 Grid System Mix and Match provides a way to combine the column with various available classes for each tier, in order to simply stack the columns in some grid tiers according to need, i.e., any number of columns in each row tier can be added to get the style of layout we want which at times can be something which is a homogeneous distribution of columns. It is generally utilized where the number of columns in each row is mixed and matched to achieve a certain type of layout.

Syntax:

<div class="row">
 <div class="col-*"></div>
 ...
</div> 

The * in col-* denotes the number of sections occupied by that column. This is a styling technique of the Grid System and to implement it each row needs to have a different set of columns occupied. 

Example 1: The below code example demonstrates how when we can mix and match the columns of a Grid System to create a layout.

Output:

Example 2: The below code example demonstrates how when we can mix and match the responsive columns classes of a Grid System to create a layout.

Output:

Reference: https://getbootstrap.com/docs/5.0/layout/grid/#mix-and-match