Changing column classes on mobile or on desktop

Question

I have a simple row with two columns

<div class="row">
<div class="col-9">
hello
</div>
<div class="col-3">
world
</div>
</div>

However due to the small screens i would like change the column classes if on mobile and so my classes would be

<div class="row">
<div class="col-8">
hello
</div>
<div class="col-4">
world
</div>
</div>

is there a method i can use to switch the classes like this? I am using thymeleaf with spring boot for backend and bootstrap 5 for frontend.

To change classes (removing, adding or toggling class-names) you'd need to use JavaScript; is that acceptable? I'm not familiar enough with Bootstrap, personally, to offer a means by which this could be achieved with only Bootstrap's CSS (though I'm sure if it's possible others will know how), but with just CSS this could be done though that would be with @media queries, and modifying the style rules for the relevant elements. — David Thomas, Oct 10 '22 at 12:02
I am having to write so many media query classes for 600px and below and i was just thinking it was easier to just switch the columns. I was thinking advanced frameworks such as tailwind have knowledge of what i am asking. — Gandalf, Oct 10 '22 at 12:03
*"I am having to write so many media query classes"* - Why would you do that ?! Bootstrap got you covered on that. Also, check out its [grid system](https://getbootstrap.com/docs/5.0/layout/grid/) as I think you don't really need to *switch classes* (based on your issue description). — ThS, Oct 10 '22 at 12:05
Okay; can you [edit] your question to add information about what you're really trying to do (that you're now trying to solve by "switching the columns")? That way we may understand your goal better. — David Thomas, Oct 10 '22 at 12:05
Well the grid hasn't been working perfectly for me @ths that's why i need to find a way to have what i need working. — Gandalf, Oct 10 '22 at 12:15

score 3 · Answer 1 · answered Oct 10 '22 at 12:07

You can use the below method to apply different classes for different screen sizes

<div class="row">
<div class="col-lg-9 col-8">
hello
</div>
<div class="col-lg-3 col-4">
world
</div>
</div>

You can replace the breakpoints based on your screen size requirements

score 1 · Answer 2 · answered Oct 10 '22 at 12:14

[...] media query classes for 600px and below

According to Customize Bootstrap 4's grid-system Breakpoints accepted answer, you can customize the provided breakpoints.

2 Answers2