My layout is using bootstrap rows for two divs. I want them to be side by side on large devices, but stacked on small devices. However, Bootstrap is not stacking them on small devices and they are still both sitting at 50%. The specific divs I am talking about have IDs of "left" and "themebox".
<div class="container">
<div class="row">
<div id="left" class="col-sm-12 col-lg-3">
<br>
<br>
<h3> Mine Style</h3>
<br>
<br>
<button id="customize">Customize</button>
</div>
<div class="col-sm-12 col-lg-9" id="themebox"></div>
#themebox{
height: 500px;
background-color: white;
float: right;
box-shadow: 0 15px 45px 0 rgba(0,0,0,.1);
padding-left: 0;
padding-right: 0;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.row{
margin-left: 0 !important;
margin-right:0 !important;
}