iBird Rose

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

col-lg-push-3 и col-lg-pull-9
https://getbootstrap.com/docs/3.4/css/#grid-column...

<div class="row">
<div class="colex1 col-xs-12 col-sm-7 col-md-8 col-lg-9 col-lg-push-3">блок111</div>
<div class="colex2 col-xs-12 col-sm-5 col-md-4 col-lg-3 col-lg-pull-9 stick">блок2</div>
</div>

Почему bootstrap привязывает стили к тегам?

Потому что это css фреймворк.
Он как раз задумывался для того, чтобы ты поставил бутстрап - и он львиную долю уже за тебя сделал. А тебе уже только нужные тебе стили написать осталось. Не задумываясь об остальном.

Специфичность селекторов потом перебить сложно же будет

че это? а какая разница в перебивании дефолтного стиля браузера и другого подключенного css? также пишешь свой стиль и перебиваешь.

На переделку модалки бутстрапа уйдет больше времени, чем сделать самому такую модалку через absolute позиционирование в нужном тебе блоке.

именно по твоему коду - ошибка в том, что ты else не прописываешь. т.е. у тебя _resize() работает нормально. просто классы, которые уже были добавлены в одном месте не ремуваются. потому что else нет.

а по существу - все, что ты хочешь сделать - делается через html и css. такие классы как col-* offset-* и т.д. имеют -md, -lg и тд. через них можно только классами задать весь путь адаптивности.
а другие классы как justify-content-center - можно одним стилем менять в media запросах.

Bootstrap - это css framework.
В двух словах - в нем заложены основные css правила, которые облегчают верстку.
Т.е. чтобы создать сайт из 3 колонок, тебе не нужно выстраивать css стили и создавать эти колонки самому, а достаточно написать

<div class="row">
			<div class="col-md-4"></div>
			<div class="col-md-4"></div>
			<div class="col-md-4"></div>
		</div>

без единиго стиля в css.
ну и также можно пройтись и по отсальным элементам компонентов бутстрапа. такие как готовые модалки, дропдауны, табы и пр.

поменяй id у табов. у тебя в обоих id="nav-custom-tabs"

ну по описанию у тебя где-то косяк со стилями. модалка бутстрапа по умолчанию работает как вы хотите. у вас по какой-то причине fixed блок не фиксируется. залейте код в песочницу.

Через css вряд ли сделаешь красиво.
К примеру можно через js менять аттрибут src. https://jsfiddle.net/0ohaLy6n/8/

сетка там стандартная 12 колоночная. а справа и слева 2 направляющие к самой сетке не относятся