koanvl

Это смотря, какой результат должен быть при клике на кнопку "фильтр". Если фильтр просто разворачивается вне хедера, то сделать кнопку в шапке и контролировать видимость кнопки медиа-запросами, а дальше по клику контролировать видимость фильтра, там где он физически есть. Если фильтр должен разворачиваться в хедере, то с кнопкой та же фигня, а вот для самого фильтра appendChild или insertBefore вам в помощь

А почему реализация именно через радиобаттоны? Если чисто дизайнер так задумал, то проще сделать псевдо-радиобаттоны. В 4 буте есть готовые табы тыц. Навигация - отдельно, таб-контент - отдельно

В Bootstrap 4 нет col-xs-* (Пруф)

Глядя на ваш код, можно сделать вывод, что вы не совсем понимаете, по какому принципу работает сетка Bootstrap. Вам нужен адаптив или пропорциональное уменьшение страницы? Если пропорциональное уменьшение страницы, то вам нужно жестко зафиксировать ширину контейнера Bootstrap (через important) и всем колонкам присвоить только col-xs-...(что у вас там ). Но есть в этом нюанс, что оно будет все такое мелкое и не юзабельное на мобильных утройствах, т.к. это не адаптив. Да и смысл тогда юзать бут? С таким же успехом можно сделать верстку фиксированную и не париться.
Если вы хотите именно адаптив или респонсив, то необходимо вникнуть в принцип работы сетки Bootstrap и дополнительно контролировать все медиа-запросами.

Решала такую проблему на 3 буте при помощи js
var minHeight = 0;
$(".offer-box").each(function () {
var height = parseInt($(this).height());
if(height > minHeight) {
minHeight = height;
};
});
$(".offer-box").height(minHeight);