How to Reset CSS after Media Query?

Question

I have some elements on my page that display and some that hide via a media query, and ultimately the nav disappears and is replaced by a responsive jQuery menu. This all works great, but when I resize the browser after, some of the elements that where once hidden are not not. This is what I have for the media query

@media only screen 
and (max-width: 1282px) 
{ 
#wrapMiddleNew { display:block; }
    }

I essintially want to hide it again on the same breakpoint sizing back up. This doesn't seem to work.

@media only screen 
and (min-width: 1282px) 
{ 
#wrapMiddleNew { display:none; }
}

Answer 1

I just got trough your page and you have to add more query format.. this should do the trick

/* Normal Formating */
#wrapLeft, #wrapMiddle, #wrapRight {
     display:block;
}

#breakNav {
     display:none;
}
/* Media Query */
@media only screen and (max-width: 1282px) {
      #wrapLeft, #wrapRight {
          display:none;
      }
     #breakNav {
          display:block;
     }
}

@media only screen and (max-width: 900px) {
     #wrapLeft, #wrapRight, #breakNav {
     display:none;
}

}

So each time your window goes lower 1282px will apear if its bigger will hide....