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

1. Можно min-width, как написал @Rikcon
2. В бутстрап нет мобильной версии, там адаптивность, "мобильная версия сайта" - это совсем из другой оперы.
3. Почитайте про медиа запросы, очень помогут
4. Botstrap можно использовать не как css, а как less или sass, соответственно сделав кроме стандартных col-lg, col-xs, например col-992

1. Что нарушилось? Как должно быть?
2. Где код?

Если речь о не равной высоте, то добавляете min-height для элементов с текстом.
Если речь о ширине и отступах, то текст тут точно не при чем. Не правильная верстка. Но без кода, могу только погадать Вам на кофейной гуще.
Вам в ответы mailru прямо между вопросами "что-то машина не заводится, в чем проблема?" и "Есть ли жизнь на марсе?"

1. css медиазапросы и калькулятор
2. перекрыть чем-то сверху, повторяющим фон, позволить самим фото уходить за пределы экрана
3. Взять(написать) js скрипт карусельки, которая может показывать по несколько фото и скролить те что не влезли

1. Как поможет размытие?
2. Тут обычно ручками делают картинку цикличной.
3. Вашу картинку сложно зациклить впринципе, так как есть перспектива и она под угом.

Решение: найти картинку, которую можно зациклить.

Кто мешает сделать не hr а border-bottom через css:

.myclass:nth-of-type(3n) {border-bottom:#000 2px solid;}

Для подобных вещей используется svg графика.
www.w3schools.com/SVG

Это делается с помощью разметки Open Graph
https://yandex.ru/support/webmaster/open-graph/int...
Разметку Open Graph используют Facebook, Вконтакте, Google+, Twitter, LinkedIn, Pinterest и другие сервисы.

1. Верстается на html+css+jquery.
2. Bootstrap - технология ускоряющая и упрощающая 1-е. Но можно обойтись без нее или использовать аналоги, а их не мало.
3. При этом не важно opencart или что-то еще. В случае с версткой под движок надо маломальски знать его архитектуру. В случае с OpenCart иметь хотя бы общее понимание что такое php. Иногда в шаблонах применяются шаблонизаторы twig или smarty тогда их тоже надо знать.

В любом случае начните с изучения html+css+jquery. Два сайта, которые надо почитать и потом использовать как справочники:
www.w3schools.com
htmlbook.ru

Создаете массив или объект или json (c чем проще\удобней работать), при нажатии на кнопку добавляете в него данные, какие надо.
Хранить можно в кукисах или локальном хранилище www.w3schools.com/HTML/html5_webstorage.asp
Последнее мне кажется более правильным выбором.
jquery - отлично справится

Если надо только стрелки и 4 штуки, то переворачивать - вариант. Если иконок много - то подключите fontawesome.io/icons и не пытайтесь экономить байты, в то время, когда точно можно сэкономить МБ (уверен что есть где, всегда есть).

Попробуйте убрать излишнюю вложенность, оттестируйте на чем-то простом. Черный блок, белый блок и все. Потом постепенно усложняйте структуру. Так отловите место вызывающее дрожание.

Миллион, но будет тормозить очень.

Сторонние шрифты могут весить совсем разные порядки килобайт. Поэтому тут нет важно кол-во шрифтов, а важно насколько они тяжелые и как быстро отрисовываются в браузере. Зайдите для примера в https://www.google.com/fonts. Там для каждого шрифта есть скорость загрузки.

А нельзя вместо 100px использовать %, раз уж контейнер в %.
Но можно задать несколько background

background-color:#fff,#ff3,#ddd;
 background-position:0 0, 100px 0, 200px 0;

только не 3 прописать, а 29 или сколько там надо Вам. Или вместо background-color, background-image
Можно сделать и в js. Вычислить ширину родителя, разбить на куски по 100px и т.д.

А чем это не годится? https://ru.bem.info/method/