iBird Rose

ставить clearfix в нужные места. к примеру так. тобишь через каждые n-ное количество дивов для нужных xs md lg и т.д.

<div class="col-xs-6 col-sm-4 col-lg-3"></div>
<div class="col-xs-6 col-sm-4 col-lg-3"></div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4 col-lg-3"></div>
<div class="clearfix visible-sm visible-md"></div>
<div class="col-xs-6 col-sm-4 col-lg-3"></div>
<div class="clearfix visible-xs"></div>
<div class="clearfix visible-lg"></div>
<div class="col-xs-6 col-sm-4 col-lg-3"></div>
<div class="col-xs-6 col-sm-4 col-lg-3"></div>
<div class="clearfix visible-xs"></div>
<div class="clearfix visible-sm visible-md"></div>
<div class="col-xs-6 col-sm-4 col-lg-3"></div>

что значит подстраивался? width: 100% чтоли?
UPD:
.el {height: 100vh;}

через media запросы

ничем не плохи. просто ценители и перфекционисты "чистого" хтмл не годуют.

у бутсрапа в компоненте Navbar getbootstrap.com/components/#navbar-default есть специальные для этого элементы.
1) где <a class="navbar-brand" href="#">Brand</a> ставишь свое лого
2) в <ul class="nav navbar-nav"> суешь свой список
3) в <ul class="nav navbar-nav navbar-right"> суешь иконки

<div class="section-1"> //черный
	<div class="container">111</div>
</div>
<div class="section-2"> //белый
	<div class="container">111</div>
</div>
<div class="section-3"> //черный
	<div class="container">111</div>
</div>

все же значит ошибся с id https://jsfiddle.net/zdqjsr3q/

1) подключить ваш style после бутсрапа
2) getbootstrap.com/customize здесь убрать галочки с Typography. ну и еще остальные можете поубирать и оставить только то для чего вам нужен бутсрап.

не использовать бутстрап и сверстать самому

вряд ли на бутсрапе ты это нормально расставишь. я бы лучше расставил их через absolute. и в html соблюдай порядок правильный, чтобы на мобильном они выстроились по порядку.

бутсрап тут не причем. делается через position: fixed.

а не легче самому .modal-dialog в media задать width: 100%; и margin убрать?