.el.hide{animation: hide 1s linear forwards}
@keyframes hide{to {opacity:0}}

loop -> observer(item)
intersection observer
if(target) el.addclass('hide')
else el.removeclass('hide')

В каком формате сохраняешь?

jpeg

Хорошо, объясню как я это понимаю. Бутстрап это не просто набор  невзаимосвязных классов содержащих правила, это так же и  система которая налагает ограничения на их использование. Я не могу просто взять и положить .row в случайное место, так как его отрицательные отступы подразумевают компенсацию ими полей родительского .container. Следовательно если я буду бездумно лепить классы которые вроде бы делают то что мне нужно я могу выстрелить себе в ногу и хорошо если не придется переверстывать после этого секцию.

все остальные меди запрсоы в этом же блоке отрабатывают

Есть варианты почему этот медиа запрос может не работать?
Обращаюсь к блоку по ID и нужно скрыть его если экран >960px

@media (min-width: 960px) {
   #mobile-menu{
       display: none;
   }
}