I have a simple row with two columns

<div >
<div >
hello
</div>
<div >
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 >
<div >
hello
</div>
<div >
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.

CodePudding user response：

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

<div >
<div >
hello
</div>
<div >
world
</div>
</div>

You can replace the breakpoints based on your screen size requirements

refer to the breakpoints in this link https://getbootstrap.com/docs/5.2/layout/grid/#grid-options

CodePudding user response：

As Kuladeep Surebathina mentioned or ths in comment, you can use Bootstrap breakpoints.

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

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