iBird Rose

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

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

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

че то типа этого. накидал быстро. времени нет. идею наверн донес.

выстроить верстку так, чтобы в $target.offset().top-число число было не статично прописано, а к примеру взять height какого-то блока. тогда и в зависимости от экрана считаться будет верно.

$('.slider').slick('setPosition');

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

Есть готовый пример или рекомендации по созданию выпускного проекта который дети (подростки) должны сверстать после (в ходе) обучения html и css

лендинг. причины:
1) много интересных и новых решений используются в большинстве своем именно в лендингах
2) сложность хорошо регулируется просто добавлением и убиранием экранов (пример: нужно посложнее для этого ученика - вставим экран со слайдером необычным и т.д.)
3) легко гуглятся дизайны лендингов

https://getbootstrap.com/docs/4.0/layout/grid/#reo...

Вызывай
$('#myModal').modal('hide')
при клике на картинку