Механик

Делаете 2 блока с меню, например. С помощью медиа-запросов при ширине окна больше 767px, к примеру, мобильный блок скрываете, десктопный показываете. При ширине меньше - наоборот. Все просто, вроде.

CSS-анимация Вам в помощь. Берете мышь, делаете ей position:absolute или fixed, если скролла нет. И затем кейфреймами с помощью transform:rotate(), transform-origin, transform:translate() делаете анимацию передвижения мыши, хоть по кругу, хоть зигзагами, хоть параллелепипедом.

Могу предложить mmenu.frebsite.nl .
Достаточно наворочен для коробочного решения. Там и анимация, и сортировка элементов на лету по буквам из названия или части названия. В общем, посмотрите. Но если требуется прям совсем просто - самому можно написать за часок-другой.

Что касается position:fixed, то не работает он, верно, из-за плагина. А дело все в том, что там весь лайот сдвигается и по барабану на всякие position:fixed. Кстати, в предложенном мной варианте, кажется, тоже встречал такую проблему, но, честно, не раскуривал.. оставил так все.

Ну чисто теретически Вы можете через JS подключать файл стилей, при условии наличию необходимого юзерагента у пользователя. Если это не так критично - просто закройте глаза на эту проблему. Поддержка устаревших браузеров - дело гиблое. Это как первобытного человека учить езде на велосипеде без велосипеда под рукой. Если эта проблема действительно стоит поперек горла - переверстайте без флексбокса, либо, как уже говорил выше подключите файлик от юзерагента и там уже напильничком с !important рвите душу :)

margin: 0 auto делает одинаковыми отступы с обеих сторон для блока.
Тот же эффект будет, если родителю блока задать text-align: center, не прибегая к margin:0 auto у самого блока

Ответ кроется в деталях. У каждого col есть padding по 15px с каждой стороны. У row же есть marginы по -15px с каждой стороны.

В итоге эта конструкция призвана

• Группировать colы
  
• Убирать лишние отступы
  

На примере Вашей конструкции:

<div class="header">
	<div class="top-line">
		<div class="container"> <!-- Дает padding 15px слева/справа -->
			<div class="row"> <!-- Убирает отступы предыдущего класса -->
				<div class="col-md-12"> <!-- Дает padding 15px слева/справа -->
					<p>Какой-то контент</p>
				</div>
			</div>
		</div>
	</div>
</div>

Без row в Вашей конструкции padding был бы по 30px с каждой стороны.

Но если у Вас в col-md-12 будут еще, например

<div class="col-md-6"></div>
<div class="col-md-6"></div>

то лучше их обернуть в row, чтобы убрать лишний отступ, который нам дает col-md-12.

Поэтому "Что пень пнем, что Пнемпень" - может быть как .row>.col-*, так и .col-*>.row (но скорее всего будет .row>.col-*>.row>.col-*)

Можно проще. В данном случае вьюпорт так и останется мобильным, а вот контент будет шириной в 650px и будет скроллиться. На мой взгляд, это самое удобное решение для корректного отображения немасштабируемых/неадаптивных блоков контента на мобильных устройствах.

@media (max-width:650px){
html{
width: 100%;
height: 100%;
overflow-x: hidden;
}
body{
min-width:650px;
overflow:auto;
}
}