Правильный ли подход к адаптивной вёрстке?
У вас получается desctop-first подход, намучаетесь потом перекрывать всякие десктопные стили на мобилках.
Наиболее удобно и читабельно организованный код - когда всё в одном файле, а media описаны внутри класса.class {
  //general & mobile styles
  color: red;
  @media (min-width: 600px) {
    //tablet & above styles
    color: green;
  }
  @media (min-width: 1200px) {
    //desktop styles
    color: black;
  }
}
Можно и так, конечно.
Но лично я предпочитаю, чтобы стили, относящиеся к одной сущности, были вместе. Чтобы можно было посмотреть и сразу понять как она себя ведет.
А не смотреть и думать - хм, а интересно, что ещё для этого блока может быть прописано в других файлах? И прописано ли? А если да, что что и где?