将响应式布局应用于特定类的列，而不是页面中的每个列类

Question

在屏幕宽度小于960px的情况下，我正在使用Media Query使各列堆叠在一起，而不是彼此堆叠。

@media screen and (max-width:960px) {
  .column {
    width: 100%;
  }
}

但这会将此响应功能应用于所有使用的列类。但我希望将此方法仅应用于页面的主要列，而不应用于页面中使用的每个列类。

对此有何建议？

Answer 1

假设您将.main类添加到主列中

@media screen and (max-width:960px) {
  .main.column {
    width: 100%;
  }
}