html - float 网格列的 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>

我可以添加媒体查询，但因为“左”和“右”列都包含在这些创建 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>