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