Так сделайте 2 обертки в виде колонок и внутри каждой делайте строки, по сколько нужно, а при необходимом брэйкпоинте просто родителей-колонок перестройте в строки
Все упирается на фантазию. По мне самый простой, но со многими вложениями, это делать в виде матрешки. Также можете постараться индивидуально растянуть дочерние блоки индивидуально
Разница? Во всем. Viewport нужен, чтобы открываемый сайт правильно подстраивался под размер девайса, а media, чтобы прописать стили для разных размеров отображения страницы. Чувствуете разницу? Установка условно говоря "разрешения" просмотра страницы и стили для отображения страницы при определенном "разрешении" просмотра
Ну тут самое простое решение, на мой взгляд, это сделать бургер. Логотип слева, справа бургер, внутри которого ссылки меню и под ними номера телефонов и кнопка
Animation-delay для отложенного запуска. Но не спасет с lazy-load (есть кончено хромовский lazy-load, который поддерживается далеко не всеми). Тут уже с js можно запустить для запуска при видимости
Так тут в инструкции по простому написано, вам только надо найти в html коде найти тот кусок кода (который и является попапом), у которого имеется некий class/id и прописать его.
Вот тут показан пример, который работает даже на шестом осле.
А по поводу того, как менять картинки во время изменения, то вешайте eventListener и собственно меняйте картинку
