My website has two main divs, one on the left and one on the right.
The left div is styled with the classes: col-md-3 left_side
And the right div with: col-md-9 right_side
In the CSS file, the left_side and right_side classes only have padding, without any float property. The floating behavior comes from the col-md Bootstrap classes.
I'm wondering how I can rearrange these divs when viewing the site on a mobile or tablet device so that the right_side div appears first.
Currently, on mobile devices, the left_side div is displayed first, causing users to scroll a lot before reaching the actual page content or selected product.
Update: Even after applying this code, the issue persists.
@media (max-width: 575px) {
.left_side {
float: right;
}
.right_side {
float: left;
}
}
@media (min-width: 576px) and (max-width: 767px) {
.left_side {
float: right;
}
.right_side {
float: left;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.left_side {
float: right;
}
.right_side {
float: left;
}
}