CSS to hide element in order to prevent wrapping - css

Question

Ok, I'm aware of media queries but they are strictly related to a certain width. Sometimes it's not convenient. Say I have bootstrap navbar with logo image and h1 in one line, like here
<nav class="navbar">
<a class="navbar-brand">LOGO</a>
<h1 class="d-inline">Long enough header</h1>
</nav>
https://jsfiddle.net/zzmaster/qno7utp0/2/
On a certain screen width it wraps into two lines. I'd prefer to hide the logo and make this process independent of the width of the second element. Ideally I think of a class of hiding priority like this
<div class="container">
<div class="prio-1">one</div>
<div class="prio-2">two</div>
<div class="prio-3">three</div>
</div>
meaning preventing line wrap by hiding less priority-objects. Is it possible?

Answer 1

I believe this is the solution. So as per this css
If width is more than 500px all the three prio-3, prio-2, prio-1 will be visible.
If width is between 200px and 500px both prio-2, prio-1 will be visible.
If width is less than 200px only prio-1 will be visible.
#media screen and (max-width: 500px) {
prio-3 {
display: none;
}
}
#media screen and (max-width: 200px) {
prio-2 {
display: none;
}
prio-3 {
display: none;
}
}