metaf

Css ничего не знает о вашем и контенте, и стили в зависимости от ширины блока (не путать в вьюпортом) задавать нельзя.
Есть решения на js, например, marcj.github.io/css-element-queries

В случае критического css, вэб компонентов (с большой поправкой на адаптивность) и писем актуально.

Хранить исходники с документацией по установке и использованию в git и/или передедавать заказчику. На ftp только папка dist

Через JS класс добавлять, можно использовать плагин elementqueries.com

1) Вообще не указывать viewport
2) Захардкодить минимальную ширину сайта в viewport, например <meta name="viewport" content="width=1200">

Оптимизацией может считаться удаление дублирующих стилей / селекторов и правильная последовательность селекторов. Дальше берете css lint или scss lint, находите конфиг, который вам подходит и чистите всё.
А эти непонятно откуда взявшиеся нули от объединения марджинов паддингов могут сыграть с вами злую шутку.

Ну так скажите заказчику, что возможности верстки не безграничны и нужно делать 2 версии сайта, например, определять на сервере что за девайс. Ну и опишите все вытекающие, типа поддержки двух версий сайта, что есть ужасный геморрой.
Почему нужно делать именно так - верстка может быть только последовательной, что не соблюдено в дизайне. Давите на скорость загрузки на мобильной версии и самое главное - на то, что это значительно ухудшит СЕО (зачастую заказчики услышав "плохо для СЕО" становятся шелковыми и слушают каждый ваш совет).
Пусть выбирает - либо две версии, либо переделывать макет.

Никак. Columns для типографии, а не списков.
Юзайте float, display inline-block или flex.

Неужели вопрос на тостере написать проще, чем открыть инструменты разработчика и увидеть ссылку с описанием проблемы https://developers.google.com/maps/documentation/j... ?
Урл нужный в API KEY не добавлен.

Верстать до 860 так, как на картинке, а то что меньше - выстраивать блоки по-человечески прямоугольниками под картинкой. Как это вообще можно сверстать на 320?? Уже сейчас 2 и 4 блоки читать ужасно не удобно, потому что строчки слишком короткие. На 320 они вообще в одно слово на строчку должны быть?
О чем такие "дизайнеры" вообще думают??

PerfectPixel

А как вы думаете писать разные леяуты? Думаете, везде будут семантичные классы? Даже если писать сетку в css, а не в html, вы в итоге придете к тому, что у вас будет .l-sb, .l-с, всякие col и т.д! Если, конечно, весь ваш сайт не состоит из одной страницы с контентом и сайдбаром.
А бутстраповские классы - это как единый язык для верстальщиков - видишь их и сразу понимаешь что там написано и как сетка перестраивается под разные разрешения.
П.с. Я бутстрап не использую и не люблю, но что может так возмутить в той сетке - не совсем понимаю. Сетка там неплохая для шаблонных задач.

Вообще, я бы считала не высоту, а выстроила все пункты в один ряд (display: inline-block; white-space: nowrap или display:table-cell), а потом считала, длиннее ли меню контейнера и добавляла ему класс. Опираться на высоту сломанного меню это как-то... странно...
В любом случае, есть небольшие библиотеки а-ля медиа-запросы для элемента, а не вьюпорта: elementqueries.com . Возможно, это вам подойдет. Потому что если делать через js самостоятельно, то нужно будет вешать триггер на ресайз и всё такое прочее, что несколько усложнит вам задачу.