Как правильно делать адаптив на PUG по БЭМ при сборке на Webpack?

Как правильно организовать адаптивную верстку по методологии БЭМ? Как я понял для десктопных устройств создается отдельная папка desktop.blocks, а для планшетов и телефонов создается touch.blocks и при сборке через webpack все настраивается так, что если человек заходит на сайт через телефон будут загружаться стили именно для маленьких экранов, НО как правильно это организовать? Например: в папке desktop.blocks лежит папка header с файлами header.pug и header.scss и я копирую папку header с вложенными в нее файлами в папку touch.blocks и в файле header.pug добавляю гамбургер (например) и изменяю стили в scss файлы на медиа-запросы? Или же можно вообще обойтись без папок desktop.blocks и touch.blocks и просто и создать папку blocks, в которой так же будет храниться папка header с pug и scss файлами и там создать media.scss и именно для header-а прописать свойства для адаптива и через webpack подключить ее? Но тогда как webpack поймет, что именно на маленьких экранах нужно подключить этот media.scss? Прошу прощения за возможно запутанный и глупый вопрос