Utility for building flex layout.

Flexbox Grid

Flexbox grid has 12 percentage base column for creating responsive designs using the CSS flexbox module.
Use d-flex display utility to make a row and col-{size} for columns.

col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
<div class="d-flex gap-2">
	<div class="col-1 p-2">col-1</div>
	<div class="col-11 p-2">col-11</div>
</div>
<div class="d-flex gap-2">
	<div class="col-2 p-2">col-2</div>
	<div class="col-10 p-2">col-10</div>
</div>
<div class="d-flex gap-2">
	<div class="col-3 p-2">col-3</div>
	<div class="col-9 p-2">col-9</div>
</div>	

Gutters

For gutters use gap utilities.

col-6
col-6
<div class="d-flex gap-4">
	<div class="col-6 p-2">col-6</div>
	<div class="col-6 p-2">col-6</div>
</div>

Responsive Columns

Use col-{breakpoint}-{property} for responsive variants like col-md-4, col-sm-12.

col-8 col-md-6
col-4 col-md-6
<div class="d-flex gap-4">
	<div class="col-8 col-md-6">col-8 col-md-6</div>
	<div class="col-4 col-md-6 p-2">col-4 col-md-6</div>
</div>

Stack Columns

Use flex utilities along with responsive columns to stack columns at specific breakpoint.
flex-{breakpoint}-column to change flex direction.

col-8 col-md-6 col-sm-12
col-4 col-md-6 col-sm-12

<div class="d-flex flex-sm-column gap-4">
	<div class="col-8 col-md-6 col-sm-12 p-2">col-8 col-md-6 col-sm-12</div>
	<div class="col-4 col-md-6 col-sm-12 p-2">col-8 col-md-6 col-sm-12</div>
</div>