How to combine min-width and max-width in one media query
<p>This media query is not working as I expected it to.</p>

<p>What I want to do is hide an element if the window is below 544px, and also hide it if it is above 767px.  So it will only be visible while the window is between 544px and 767px. </p>

<pre><code>@media (max-width: 544px) and (min-width: 767px) {
    .show-sm-only {
        display: none !important;
    }
 }
</code></pre>

<p>It seems that they work separately, but not together.</p>

<p>How do I achieve this?</p>