<div class="row">
	<div class="col-9">
	       <div class="row">
			<div class="col-8"></div>
			<div class="col-4"></div>

			<div class="col-4"></div>
			<div class="col-8"></div>
		</div>

	</div>
	<div class="col-3"></div>
</div>

ну вертикальные margin саме поставьте я думаю. Класс Bootstrap 4 использовал

Да нормально, даже хорошо. Если заказчик нормальный человек (что все таки большинство), то хорошо. По поводу меню, нужно сделать через ::after, ::before

.menu li a::before,
.menu li a::after{
   content: "";
   position: absolute;
    bottom: 0;
    width: 49%;
    height: 2px;
}

У меня на телефоне все вроде адаптивно. Кэш чистить пробовали?

Сделай табы ссылками. Обычные якоря вообщем.
И добавь код:

$('a[data-target="anchor"]').on('click', function(){
		var target = $(this).attr('href'),
			bl_top = $(target).offset().top;
		$('body, html').animate({scrollTop: bl_top}, 700);
		return false;
	});

Если не правильно понял. Скинь ссылку на сайт, чтобы наглядно смотреть.

body {
    overflow-x: hidden;
}