Максим Тимофеев

Если это делать на bootstrap - то придется править верстку, не уверен, что классами тут можно обойтись, можно конечно поиграться с push, pull и offset, но зачем? Сделайте backup и переверстайте плагин.
Но если все же верстку трогать нельзя, тогда я бы не трогал и bootstrap и решил бы все абсолютным позиционированием.

Что посоветуете?

Советую не решать любую задачу средствами bootstrap. Это удобный инструмент, но не заменяет знаний css. Ознакомитесь: htmlbook.ru/css/media

Конкретно в Вашем случае, можно задать для текста отрицательный маргин сбоку, и потом убирать его. А перенос решать с помощью col-xs-6 col-md-12

Вы бы выложили, то что получается на https://jsfiddle.net например и тогда Вам помогут.

для блока со скролом установить нужный height или топором: overflow: hidden;

Наиболее удобный, как по мне способ, это ajax валидация. Логика валидации на сервере дает больше места для маневра, например уникальность поля проверить и т.д. Хотя лишние запросы летают. А на клиенте только вывод ошибок. Обычно все сводится к скрипту в 6 строк, где пришедший ответ выводится в виде nitify, юзаю alertifyjs.com

Отступы слева и справа сделай через calc(100% - что-то)

В бутстрап уже есть определенный отступ. Обнулять его вот так бездумно плохая идея.
Если нужно вставить карту, то наверное нужен еще 1 div

<div class="col-xs-8 col-sm-7 col-md-6">
  <div class="map-wrapper" id="myMap">
    //тут код карты
  </div>
</div>

Далее
Зачем картинке указаны жесткие размеры?
Вы уверены что два блока должны иметь "col-xs-8 col-sm-7 col-md-6" и "col-xs-8 col-sm-7 col-md-6" если это две колонки, то видимо "col-xs-12 col-md-6" и "col-xs-12 col-md-6"

необходимо подключать 2 .css файла

нет такой необходимости

1-й это стили framework-а
2-й тема к нему, если просто, то цветовая гамма

Ошибка в том что в модальное окно вложено модальное окно. Зачем такой ад?
Плюс думаю у Вас у модалок id одинаковый, в любом случае решать Вашу проблему можно только видя код. Без кода - все это догадки. А кофейная гуща уже заканчивается.

Тут 2 варианта решения, все сводятся к добавлению класса. Добавить можно на сервере при генерации html меню или же в js.
В js проблема в том, что надо брать текущий url и сравнивать с href ссылки, а они не всегда совпадают. Например могут добавляться хеш теги или параметры, а это уже другая строка. Соответственно скрипт должен это предусматривать.
Чаще это удобнее сделать именно на сервере, но в случае с MODX это не всегда так.
Скриптов js куча:
https://yandex.ua/search/?rdrnd=701635&win=200&tex...
выбирайте, наверняка не все адекватные

У бутстрапа адаптивность есть из коробки и реализована через grid:
getbootstrap.com/css/#grid-media-queries
В чем проблема?
Вот у Вас в коде есть виды тортов, у них class="col-md-3" а почему бы не сделать class="col-xs-12 col-sm-6 col-md-3" - будет адаптивно, в том же духе с остальным.
Ну и шапку так же или без бутстрап с помощью медиазапросов.
Если хотите резину - старайтесь минимизировать фиксированные величины типа px, и используйте % или vh,vw,rem и другие относительные единицы. Показательный пример - Ваше лого. Оно ужасно смотрится на маленьких дисплеях.

Поисковики игнорируют скрытые блоки, а один из этих точно скрыт

1. Если нужно фиксировано, то не .conteiner-fluid а просто .conteiner
2. Зависит от того что Вам надо, выбрать экраны для которых 768 это максимум или наоборот
3. Сетку можно настроить под свой проект тут: getbootstrap.com/customize/#grid-system
4. Ходят разные мнения. Вопрос спорный, многое завит от ситуации. Мое мнение - не использовать продукты в альфа и бета версиях
5. Все ответы на вопросы "моги ли я это использовать" есть тут: caniuse.com/#search=flex
6. Bootstrap 4 и SASS!!!

Править надо не bootstrap а Ваш код. Ваш правый блок видимо имеет запредельный z-index или родитель левого дропдауна имеет z-index:-1; Проверьте и настройте правильно z-index для всех элементов.

Если хотите фиксированную ширину, то row должен быть внутри .container и у .container должен быть соответствующий width в пикселях. Вопрос в другом, а кто сегодня делает сайты с фиксированным контейнером? Думаю Вам надо переходить от px к %.

img {max-width: 100%; height:auto;}

Все что касается отступов - это css

сначала вопрос: почему Вы решили, что такой вариант менее ресурсоемкий по сравнением с построением полного дерева? Спрятав дочерние элементы в Collapse. Если результат построения дерева (html) закешировать - вот это будет правильно.
Теперь по вопросу:
после того как виджет Collapse отработал, Вы имеете уже html, и массивы тут не при чем явно. Дальше забываем про php и работаем с jquery. Вам надо цепляться за событие shown.bs.collapse и отправлять ajax запрос на сервер, там формировать html и возвращать, потом вставлять в контейнер.
bootstrap-3.ru/javascript.php#collapse