.class-1{}
 .class-2{}
@media (max-width: 767px) {
  .class-1 { /* стили для экранов 767px и менее */  }
  .class-2 { /* стили для экранов 767px и менее */  }
}
Лучше определить для себя как удобнее:
1. Работать с "@media" и группой различных .class 
2. Или Работать с каждым ".class" в различных "@media"
Для себя выбираю ПЕРВОЕ. (считаю это более грамотный подход, ибо "@media" может быть много - при нескольких условиях)