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>