Mediawiki media query wont take effect on browser resize when using firefox and IE

<meta name="viewport" content="width=min-width, initial-scale=1.0">




@media (max-width: 455px) and (orientation: portrait) {

    #border-search {
  display: none;
}



#n-recentchanges {
visibility: hidden;
}   

#n-randompage {
display: none;
}

/*sidebar appearance*/

#column-one {
     background: none repeat scroll 0 0 #5B5B5B;
    float: left;
    text-align: center;
    margin: 0 0 0 1%;
    min-height: 149px;
    padding: 10px 20px;
    position: absolute;
    font-size: 90%;
    top: 5px;
    height: 1px;
    left: 6%;
    width: 15%;
}

#n-home {
    position: relative;
    top: 0px;
    left: -8px;
}

#n-sign-up {
    position: relative;
    top: 5px;
    left: 0px;
}

#n-help {
    position: relative;
    top: 13px;
    left: -4px;
}

#n-add-pix {
    position: relative;
    top: 19px;
    left: 0px;
}

#column-content {
    background: none repeat scroll 0 0 #5B5B5B;
    float: right;
    margin: 0 1%;
    padding: 10px;
    width: 70%;  
    position: relative;
    top: 0px;
    left: -10%;

}


#button .hidetext {
    background: none repeat scroll 0 0 #5B5B5B;
    display: block;
    color: #99D9EA;
    margin: 0 1%;
    position: relative;
    float: right;
    border: 0px;
    top: 95px;
    left: 53%;
}

#ca-edit {
    position: relative

}

/*edit page nav*/
.top_header {
    background: none repeat scroll 0 0 #5B5B5B;
    display: none;
    float: right;
    margin: 0 1% 40px;
    padding: 30px 10px;
    width: 60%;
    height: 60px;
    position: relative;
    top: -370px;
    left: -10%;
}
#p-cactions {
    float: left;
    display: none;

}

#p-cactions li {
    float: none;
    font-size: 22px;
    list-style: outside none none;
    margin: 0 35px 0 0;
    text-align: left;
    position: relative;
    left: 10%;

}

#p-personal {
    float: left;
    display: none;
}

.top_header ul {
    margin: 0;
    padding: 0;
}

#p-cactions {
    float: left;
}

#p-personal li {
    float: none;
    font-size: 22px;
    list-style: outside none none;
    margin: 0 15px 0 0;
}

#column-content #bodyContent {
    color: #7b377b;
    float: left;
    font-size: 115%;
    margin: 15px 0 15px 50px;
    width: 94%;

}



#column-one h3 {
    display: none;
}

#column-one ul {
    margin: 0;
}

.mw-ui-vform-field {
width: 70%;
}

/*control font size*/

#column-one li {
  font-size: 18px;
    list-style: outside none none;
    margin: 1px 0;
    text-align: center;
    }



/*control special page layout*/   
.mw-ui-input {
    width:80%;
}

#wpLoginAttempt {
width: 70%;
}
.mw-submit {
width:70%;
}

/*control search input text color and font*/
#searchInput {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 4px solid #000000;
    box-shadow: none;
    position: relative;
    top: -60px;
    text-align: center;
    left: 400%;
    float: right;
    color: #99D9EA;
    padding: 8px;
    width: 92px;
    z-index: 3;

}

    .rectangle-box {
        background: none repeat scroll 0 0 #5B5B5B;
        float: right;
        display: block;
        margin: 0 1% 40px;
        position: relative; 
        width: 60%;
        height: 130px;
        left: 0%;
        top: 35px;
    }
    .rectangle-box2 {
        background: none repeat scroll 0 0 #5B5B5B;
        float: right;
        display: none;
        margin: 0 1% 0 40px;
        height: 400px;
        width: 70%;  
        position: relative;
        top: 0px;
        left: -10%;

}
}

The media query I'm using only seems to be recognized by Chrome and Opera. I'm trying to get my site to resize with this media query, but when I change the browser window to that size the query doesn't take effect. What can I do to fix this? Is there a problem with my code? What could cause this to happen only in certain browsers?

The issue was fixed by changing the order of the media queries. They were blued out before in my coding panel. this went away by cutting and pasting the queries in a different order. Now the queries work in all browsers.