jquerys show/hide ignorerer @media display-setting

css:
#box > ul { margin: 0; padding: 0; }
#box > ul > li { border: 1px solid red; }
@media (max-width: 600px) {
    #box > ul { display: table; width: 100%; }
    #box > ul > li { display: table-cell; }
}
@media (min-width: 601px) {
    #box > ul { display: block; }
    #box > ul > li { display: inline-block; }
}

html:
<div id="box">
    <ul>
        <li>Punkt 1</li>
        <li>Punkt 2</li>
        <li>Punkt 3</li>
    </ul>
</div>
<button id="btn">Tryk</button>

jquery:
$(document).ready(function(){
    $('#box > ul > li:eq(2)').hide();
    $('#btn').click(function(){ $('#box > ul > li:eq(2)').show(); });
});

Det fungerer som sådan fint nok. Når jeg trykker på knappen så viser siden punkt 3!
Min udfordring er, at hvis jeg gør følgende:
1) Hvis jeg starter vinduet i en bredde på mere end 600 pixels (fx maximeret)
2) Herefter trækker vinduet sammen til en bredde på færre end 600 pixels
3) Trykker på knappen
Så vil "Punkt 3"'s styling for display være "inline-block" i stedet for "table-cell", som de øvrige liste-elementer har.

Det modsatte gør sig gældende , hvis man går fra en størrelse på færre en 600 pixels og øger bredden til mere end 600 pixels.

Jquerys ".hide()" husker altså det display var sat til da den blev gjort usynlig, og sætter den til det igen når den så synliggøres igen, og ignorerer at display-settingen er blevet ændret via @media.

Jeg overvejer selv at bruge add og remove i stedet for hide og show, men måske er det noget der er smartere?