Change the float of 2 div on mobile - html

Question

I have two main div on my site, a left and a right.
The left one has these classes: col-md-3 left_side
And the right one: col-md-9 right_side
In the CSS file, the left_side and the right_side classes have only just some padding, no float. The floating is from the col-md bootstrap classes.
How can I do that if I am viewing the site on mobile or tablet, to change these to divs sequence? The right_side div will be the first.
I want this, because now on mobile, the left_side div is the first, and I have to scroll down a lot to view the actual page content or the product page I selected.
Update: Whit this code, i still get the same problem.
#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;
}
}

Answer 1

This is a simple solution for this issue:
Edit: changes css
Edit2 Using max-width instead min-width in css media query
.left_side {
background-color: red;
}
.right_side {
float: right !important;
background-color: blue;
}
#media (max-width: 992px) {
.right_side {
float: none !important;
}
}
<div class="col-md-9 right_side">Right in desktop, top in mobile</div>
<div class="col-md-3 left_side">left in desktop, bottom in mobile</div>