<div id="header" class="hidden-xs hidden-sm">...</div>

<div id="header-mobile" class="hidden-md hidden-lg">...</div>

You only need one media query for this.
You can set #header-mobile to display: none in the root scope, and then in the media query you set it to display: initial and set #header to display: none.

@media screen and (max-width: /* max width of md */) {
#header {
display: none;
}
#header-mobile {
display: initial;
}
}

@JTBringe it's only slightly better. The ideal implementation should be not having 2 header divs in the DOM, only 1 header, but different style/behaviour depending on the screen size

@kudamalam Yes, that is true, but sometimes you have elements that are so different that you just need to separate rhem out like that.