Flex Wrap

wrap

<div class="flex flex-wrap">
    <div class="w-40pc">block 1</div>
    <div class="w-40pc">block 2</div>
    <div class="w-40pc">block 3</div>
</div>
block 1
block 2
block 3

nowrap

<div class="flex flex-nowrap">
    <div class="w-40pc">block 1</div>
    <div class="w-40pc">block 2</div>
    <div class="w-40pc">block 3</div>
</div>
block 1
block 2
block 3

wrap-reverse

<div class="flex flex-wrap-reverse">
    <div class="w-40pc">block 1</div>
    <div class="w-40pc">block 2</div>
    <div class="w-40pc">block 3</div>
</div>
block 1
block 2
block 3
Responsive variants
.sm-flex-wrap
.md-flex-wrap
.lg-flex-wrap
.xl-flex-wrap
.sm-flex-nowrap
.md-flex-nowrap
.lg-flex-nowrap
.xl-flex-nowrap
.sm-flex-wrap-reverse
.md-flex-wrap-reverse
.lg-flex-wrap-reverse
.xl-flex-wrap-reverse