I'm only seeking to hide images to display text, instead.

Here is my media query and styles:

@media screen and (max-width: 600px) { 
#main { 
font-size: 14px !important;
}

#main h1 { 
font-size: 24px !important;
}

#main h2 { 
font-size: 22px !important;
}

#main h3 { 
font-size: 20px !important;
}

#main h4 { 
font-size: 18px !important;
}

table[class="responsive-table"] { 
width: 100% !important;
}

/*
table[class="responsive-table2"] { 
width: 100% !important;
text-wrap:normal;
padding-top:12px;
}
*/

td[class="header"] { 
background-color: #ff6e15 !important;
font-family:"Arial Black", "Arial Rounded MT Bold", sans-serif;
font-size:24px;
color:#ffffff;
height: 40px;
}

td[class="headline"] { 
font-size: 20px !important;
background-color:#000000;
}

td span { 
visibility: visible !important;
padding-left: 6px;
}

div[class="responsive-div"] { 
text-align: left !important;
}

div[class="responsive-div2"] { 
display: none !important;
}

img[class="responsive-image"] { 
max-width: 100% !important;
height: auto;
}

img[class="responsive-image2"] { 
display: none !important;
}
}

Any help would be tremendously appreciated.!

I would include a couple of screenshots, but can't make that work, for some reason.