I've been tasked with making an existing website responsive. It's using a bootstrap style grid system and is quite a mess. The following is a snippet of code.
<div class="col-1 col-2 col-3">
<div class="left">Left Column</div>
</div>
<div class="col-1 col-2 col-3">
<div class="right">Right Column</div>
</div>
I can add media queries but because the "left" and "right" columns have both been wrapped in these column creating divs, with existing widths applied. What's the best semantic way of rewriting the code (while keeping all the existing column styles), so that I can apply my own styles using media queries?