Why media queries not using the correct CSS - html

Question

I have the following HTML:
<div class="section group">
<div class="col span_1_of_3 articleTeaserBoxColor">
<div class="test2n">
<div class="imgHolder"><img id="NewsArticle_2790_image" class="imgArtThumb" title="" alt="" src="artOne.png" /></div>
<div class="textHolder">
<div class="textHolderTop">Care on the Fast Track</div>
<div class="textHolderBottom">The National Cancer Institute</div>
</div>
</div>
</div>
<div class="col span_1_of_3 articleTeaserBoxColor">
<div class="test2n">
<div class="imgHolder"><img id="NewsArticle_2792_image" class="imgArtThumb" title=" alt="" src="artThree.png" /></div>
<div class="textHolder">
<div class="textHolderTop">Stay Connected</div>
<div class="textHolderBottom">tool for interacting with your provider and following your healthcare</div>
</div>
</div>
</div>
<div class="col span_1_of_3 articleTeaserBoxColor">
<div class="test2n">
<div class="imgHolder"><img id="NewsArticle_2791_image" class="imgArtThumb" title="" alt="" src="artTwo.png" /></div>
<div class="textHolder">
<div class="textHolderTop">Know When Antibiotics Work and When They Don't</div>
<div class="textHolderBottom">If you or your child has a virus, antibiotics will not help you or him/her</div>
</div>
</div>
</div>
</div>
CSS:
.imgArtThumb
{
max-width: 100%;
height: auto;
}
.aTitle
{
font-size: 16px !important;
font-weight: bold;
color: #F67D24;
margin-top: 15px;
margin-bottom: 15px;
}
.test2
{
padding: 8px;
text-align: left;
box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(238,146,85,1);
}
.test2n
{
text-align: left;
height: 95%;
width: 95%;
padding: 2%;
overflow: hidden;
}
.articleTeaserBoxColor
{
vertical-align: top;
box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5), inset 0 1px 1px rgba(238,146,85,1);
}
.test2 p, .test2n p
{
text-align: left;
}
.setP p
{
text-align: left;
padding: 10px 10px 0 0;
}
.setP article
{
text-align: left;
padding: 10px 0 0 0;
}
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
height: auto;
overflow: auto;
text-align: center;
width: 100%;
}
/* COLUMN SETUP */
.col {
display: block;
/*float:left;*/
display: inline-block;
margin: 1% 0 1% 0;
}
.col:first-child {
margin-left: 0;
}
/* GROUPING */
.group:before, .group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 32.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
#media only screen and (max-width: 820px) {
.col {
margin: 1% 0 1% 0%;
padding-bottom: 10px;
}
}
#media only screen and (max-width: 820px) {
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 100%;
}
.span_1_of_3 {
width: 98%;
}
.imgArtThumb {
width: 100%;
height: 110px;
}
.setTableCell
{
display: block;
}
}
.imgHolder
{
float: left;
display: inline-block;
width: 43%;
padding-right: 2%;
height: 100%;
}
.textHolder
{
float: left;
display: inline-block;
width: 55%;
height: 100%;
}
.textHolderTop
{
width: 100%;
height: 48%;
text-align: left;
padding-bottom: 2%;
overflow: hidden;
}
.textHolderBottom
{
width: 100%;
height: 48%;
overflow: hidden;
text-align: left;
padding-bottom: 2%;
}
.setTableCell
{
display: table-cell;
}
At full desktop width page this is what I see:
At smaller screen (mobile) this is what I see:
If I remove the text or unchecked table-cell from the developer tool from the image below, it works fine. But I am not sure why the display: block is cancelled out if the screensize matches the condition.
How can I resolve it

Answer 1

In your css, .setTableCell is assigned display:table-cell below the media query part. Move it higher or give the media query a narrower selector; just being inside a media query block does not give it higher priority.