3 Spalten im Footer responsive gestalten

[Marcel]

Liebe Forenmitglieder,

ich versuche seit einigen Tagen meine Homepage in ein responsives Layout zu überführen. Dabei muss ich gestehen, dass ich nie in meinem Leben programmieren gelernt habe. Vielmehr hatte ich mir in den 90er Jahren das Erstellen von Internetseiten in Tabellenform selber beigebracht. Damit soll nun aber Schluss sein und ein erster, kleiner Entwurf steht bereits. Leider scheitere ich am Footer. Er soll aus drei unterschiedlich breiten Spalten nebeneinander (Desktopansicht) bestehen. In der mobilen Variante soll dann die mittlere Spalte ganz ausgeblendet und die verbleibenden zwei Spalten auf voller Seitenbreite untereinander angezeigt werden).

Hier mal mein html-code:

<div id="footer">
   <div class="row">
    <div class="leftfooter">
      <h3>Deine Hansa-Park Fanseite</h3>
      <p>Hier kommt der abschließende Text hin. Ich brauche allerdings noch ein paar mehr Buchstaben um den tatsächlichen Abstand zur Karte zu testen.</p>
    </div>
    <div class="mapfooter">
      <img src="map_facts.png"/>
    </div>
    <div class="rightfooter">
      <h3>Links</h3>
      <p>Eintrittspreise ansehen<br/>
         Eintrittskarten kaufen</p>
    </div>
   </div>
  </div>

Das zugehörige CSS sieht folgendermaßen aus:

#footer {
  padding: 0;
  background: #bc1014;
  margin: 0;
  border: 0;
  color: #ffffff;
}

.leftfooter {
    float: left;
    width: 40%;
    padding: 0 20px 10px 20px;
    margin: 0 auto 0 auto;
    text-align: left;
}

.mapfooter {
    float: left;
    width: auto;
    padding: 10px 0 10px 0;
    margin:  0 auto 0 auto;
    text-align: center;
}

.rightfooter {
    float: left;
    width: 30%;
    padding: 0 20px 10px 20px;
    margin: 0 auto 0 auto;
    text-align: left;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn, .leftfooter, .rightfooter {
    width: 100%;
    padding: 0;
  }
   .mapfooter {
    display: none;
   }
}

Die Seite ist insgesamt auf 1000px Seitenbreite begrenzt. Nun ist es leider so, dass zwar mit schmaler werdender Bildschirmgröße das Bild im Bereich ".map_footer" verschwindet, jedoch bleiben ".leftfooter" und ".rightfooter" nebeneinander liegen und behalten auch ihre Breiten "width" von 40% bzw. 30%, obwohl unter @media anders von mir eingestellt.

Kann mir jemand von euch bei meinem Problem weiterhelfen? Danke.