I think because CSS layout without the aid of a CSS grid is so @$@% obtuse.
Or at least, try as I might, I've yet to find a clear and comprehensive explanation of how to do it properly. So, despite thinking CSS Zen Garden is a work of beauty, for my own part I just throw bootstrap at it and get on with my life, and I'm not ashamed about it.
If your content won't flow/flex into a grid well, then those parts should have custom CSS @media queries to begin with.. it's a matter of learning that.
Alternatively, you can use something like react with event triggering on window resize, and use the actual window size as part of your rendering... for example, I'll put the event to trigger my redux store so that state.window.size.height/width are set, I'll sometimes also do the window.scrollTop in the events as well.. this way I can use that in code for my components...
render(props) {
if (props.window.size.width < 600) return null;
if (props.window.size.width < 1024) return <div>...</div>;
...
}
Or similar changes in rendering... assuming something like redux with react-redux's connect. It's actually a pretty slick way to handle this. In this example, [1] I'm using the value to also adjust visual configuration from inputted configuration.
The problem there is, I have no incentive to continue to part 2. Every time I've tried, it's been a frustrating mess that ends in failure.
I suppose it's easy for me to punt because I'm not a front end developer. To be honest, though, CSS is such a bizarre layout system that I don't think I can blame the pros for doing it, either. Part of being a professional is finding the most profitable use for your time, and I doubt that most people will notice the difference.
