CSS媒体查询浮动网格列？

Question

我的任务是使现有网站具有响应能力。它使用的是引导样式的网格系统，相当混乱。以下是代码段。

<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>

我可以添加媒体查询，但是因为“ left”和“ right”列都被包装在这些列中，因此创建了div，应用了现有宽度。重写代码（同时保留所有现有的列样式）以使我可以使用媒体查询应用自己的样式的最佳语义方法是什么？

Answer 1

您可以向其中添加id

<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>