You can use breakpoints in order to change the width of a column on diferent devices
| Prefix | Container width | Example |
|---|---|---|
| xl | > 1280px | col-w-xl-3 |
| lg | res > 1024 | col-w-lg-4 |
| md | res > 768px | col-w-md-6 |
| sm | res > 576px | col-w-xl-12 |
| none | > 576px default | col-3 |
<div class="row ">
<div class="col col-w-sm-12 col-w-md-6 ">
I'm a full width on small screen but half on medium up
</div>
<div class="col col-w-12 col-w-md-6 col-w-lg-4 ">
Im full width on sm, half on md and 1/4 on large
</div>
</div>
I'm a full width on small screen but half on medium up
I'm full width on sm, half on md and 1/3 on large