Need help with media queries

Question

Ok most of my attempts have been successful. BUT I have one problem.
I would like Column 1 (Site Links and Column 3 (Exclusive Articles) to Hide when the page is at max-width 500 pixels. I have no idea how to make a CSS sheet remove HTML coding, which is why I came here to ask. Important Note: Coding to remove are highlighted in Red.
Html Coding of Footer:
<footer>
      <h2 class="hidden">Our footer</h2>
      <section id="copyright">
        <h3 class="hidden">Copyright notice</h3>
        <div class="wrapper">
          <div class="social"> <a href="index.html"><img src="img/G.png" alt="G" width="25"/></a> <a href="index.html"><img src="img/U.png" alt="U" width="25"/></a> <a href="index.html"><img src="img/I.png" alt="I" width="25"/></a> <a href="index.html"><img src="img/D.png" alt="D" width="25"/></a> <a href="index.html"><img src="img/E.png" alt="E" width="25"/></a> <a href="index.html"><img src="img/S.png" alt="S" width="25"/></a> </div>
          &copy; Copyright 2014 by Expertpcguides.com. All Rights Reserved. </div>
      </section>
      <section class="wrapper">
        <h3 class="hidden">Footer content</h3>
        <article class="column">
          <h4>Site Links</h4>
            <div id="class2">
              <p><a href="web-contributors.html" class="style10">Developers/Contributors</a></p>
            </div>
            <div id="class2">
              <p><a href="create-a-page.html" class="style10">Create a page</a></p>
          </div>
          <div id="class2">
            <p><a href="point-system.html" class="style10">Rewards System</a></p>
          </div>
          <div id="class2">
            <p><a href="privacy" class="style10">Privacy</a></p>
          </div>
        </article>
        <article class="column midlist2">
          <h4 class="style4">Follow Us</h4>
          <ul class="style4">
<li>
  <div id="class2">
              <p><a href="javascript:void(0)"><img src="img/Facebook logo.png" alt="Twitter Image" width="30" height="33"/></a><a href="https://www.facebook.com/expertpcguides" class="style18"> Facebook</a></p>
</div></li>
<li class="style10">
  <div id="class2">
              <p><a href="javascript:void(0)"><img src="img/Twitter Logo.jpg" alt="Twitter Image" width="30" height="33"/></a><a href="https://twitter.com/ExpertPcGuides" class="style18"> Twitter</a></p>
          </div>
</li>
<li class="style10">
  <div id="class3">
    <p><a href="javascript:void(0)"><img src="img/Google+ Logo.jpg" alt="Google + Image" width="30" height="33"/></a><a href="https://plus.google.com/115474035983654843441" class="style18"> Google Plus</a></p>
  </div>
</li>
<li class="style10">
  <div id="class4">
    <p><a href="javascript:void(0)"><img src="img/Pininterest Logo.png" alt="Google + Image" width="30" height="32"/></a><a href="http://www.pinterest.com/expertpcguides/" class="style18"> Pininterest</a></p>
  </div>
</li>
          </ul>
        </article>
        <article class="column rightlist">
          <h4 class="style4">Interested in Exclusive Articles?</h4>
            <div id="class2">
              <p><a href="login.html" class="style10">All you need to do is login/register</a></p>
            </div>
        </article>
      </section>
<section class="wrapper"></section>
        </footer>
CSS Stylesheet Snapshot of the coding:
@media (max-width: 500px)
    #four_columns
                width: 500px;
  display:none;

Answer 1

Add a class of 'hide' to the Site Links <article> tag as below:
<article class="column hide">
<h4>Site Links</h4>
You already have a class of 'rightlist' for the Interested in Exclusive Articles? <article> tag so we'll use that.
<article class="column rightlist">
<h4 class="style4">Interested in Exclusive Articles?</h4>
Add this media query to your css styles:
<style>
@media screen and (max-width: 500px) {
.hide, .rightlist {
display: none;
</style>