Responsive CSS float table when resizing for mobile - html

Question

I have a page with a simple 2 column CSS table inside a general container div, like so:
#container:after {
content: "";
display: table;
clear: both;
}
#col_1 {
float: left;
width: 50%;
padding-right: 20px;
}
#col_2 {
width: 50%;
}
It works correctly on computers but on mobile the two columns overlap/overlay and I would like col2 to go underneath col1. In other words float ONLY if there is room for both, otherwise become two rows.
How can I do that?
Thank you

Answer 1

Since I don't have your HTML code, I can only do a mock-up by myself. Add media query for breakpoint for the mobile device.
html,
body,
#container {
width: 100%;
margin: 0;
}
#container:after {
content: "";
display: table;
clear: both;
}
#col_1 {
float: left;
width: 50%;
height: 100px;
padding-right: 20px;
background: orange;
}
#col_2 {
float: left;
width: calc(50% - 20px); /* The 20px is the padding-right of the col_1 */
height: 100px;
background: lime;
}
#media screen and (max-width: 576px) {
#col_1 {
width: 100%;
}
#col_2 {
width: 100%;
}
}
<div id="container">
<div id="col_1"></div>
<div id="col_2"></div>
</div>