CSS media queries for floating grid columns?

Question

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?

Answer 1

You can add an id to them

<div id="left" class="col-1 col-2 col-3">
  <div class="left">Left Column</div>
</div

<div id="right" class="col-1 col-2 col-3">
  <div class="right">Right Column</div>
</div>