Bootstrap 3 - Links in footer not working on mobile versions

Question

I've already searched thoroughly for an answer to this problem (notably the z-index solution and I even tried to change the div entirely) but nothing seems to be working.

I'm using Bootstrap 3 and my links are not clickable in the footer only. The links are clickable on the rest of the page, but not in the footer. The footer links are also working on desktop version, but not on mobile, indicating it might a problem with media queries (?).

Here's the portion of the CSS code and of the HTML code.

#footer {
    background-color: #afb42b;
    height: auto;
    width: 100%;
    color: #fff;
    z-index: 1;
}

#footer a {
    color: #fff;
     z-index: 1;
}

/* Custom, iPhone Retina */

@media screen and (min-width: 320px) {
    #footer {
    z-index: 1;
}

#footer a {
     z-index: 1;
}
}

/* Small Devices, Tablets */

@media screen and (min-width: 768px) {
    #footer {
    z-index: 1;
}

#footer a {
     z-index: 1;
}
}

/* Medium Devices, Tablets */

@media screen and (min-width: 1024px) {
    #footer {
    z-index: 1;
}

#footer a {
     z-index: 1;
}
}

/* Large Devices, Wide Screens */

@media screen and (min-width: 1200px) {
    #footer {
        margin-top: 4rem;
        padding-top: 2rem;
        z-index: 1;
    }

    #footer h1 {
        margin-top: 2rem;
        font-size: 23px;
        z-index: 1;
    }

    #footer ul > li {
        position: relative;
        margin-left: -35px;
        z-index: 1;
    }

    #footer .contact-info {
        padding-bottom: 1.75rem;
        font-size: 16px;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        z-index: 1;
    }


    #footer .contact-phone {
        font-size: 20px;
        font-weight: 600;
        z-index: 1;
    }

    #footer .copyright {
        font-size: 12px;
        z-index: 1;
        !important margin-top: 2rem;
        !important
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<section id="footer">
    <div class="container">
        <div class="col-lg-4 col0-md- 3 col-sm-12 col-xs-12">
           <h2 class="text-left">Camping</h2>
            <ul>
                <li><a href="photos.php">— Photos</a></li>
                <li><a href="tarifs.php">— Tarifs</a></li>
                <li><a href="tarifs.php#promo">— Promotions</a></li>
            </ul>

           <h2 class="text-left">Services</h2>
            <ul>
                <li><a href="services.php">— Services</a></li>
                <li><a href="services.php#events">— Mariages et événements corporatifs</a></li>
            </ul>
        </div>
        <div class="col-lg-4 col0-md- 3 col-sm-12 col-xs-12">
           <h2 class="text-left">Activités</h2>
            <ul>
                <li><a href="activites.php">— Activités du camping</a></li>
                <li><a href="activites.php#calendar-section">— Calendrier des activités</a></li>
                <li><a href="activites.php#country">— Festival western</a></li>
                <li><a href="activites.php">— Activités à proximité</a></li>
            </ul>

           <h2 class="text-left">Roulottes Prêts-à-Camper</h2>
            <ul>
                <li><a href="roulottes-a-louer.php">— Roulottes Prêts-à-Camper</a></li>
                <li><a href="roulottes-a-louer.php">— Tarifs</a></li>
                <li><a href="roulottes-a-louer.php">— Règlements</a></li>
            </ul>
        </div>
        <div class="col-lg-4 col0-md- 3 col-sm-12 col-xs-12">
           <h2 class="text-left">Contact</h2>

            <ul>
                <li class="contact-info"><a href="#">[email protected]</a></li>
                <li class="contact-phone"><a href="#">819 864-4731</a></li>
                <li class="contact-info"><a href="services.php#plan">Plan du site</a></li>
                <li class="contact-info"><a href="https://campingbeau-lieu.com/en/">English</a></li>
            </ul>
      <h2 class="text-left">Nous suivre : </h2>     
      <a href="https://www.facebook.com/Camping-Beau-lieu-110223305786148/" target="_blank"><i class="fa fa-3x fa-facebook-official" aria-hidden="true"></i></a>
        </div>

          <div class="col-lg-12 copyright text-center">Camping Beau-Lieu © 2017-<?php echo date('Y');?> | Conception par <a href="https://ignitely.ca">ignitely</a> avec <i class="fa fa-coffee" aria-hidden="true"></i> et <i class="fa fa-heart" aria-hidden="true" style="color:#ff69b4;"></i></div>
    </div>
</section>

Thank you for your support. :)

Answer 1

Try the following snippet. I have added a row class to all parts in the column.

#footer {
  background-color: #afb42b;
  height: auto;
  width: 100%;
  color: #fff;
}

#footer a {
  color: #fff;
}


/* Custom, iPhone Retina */

@media screen and (min-width: 320px) {
  #footer {}
  #footer a {}
}


/* Small Devices, Tablets */

@media screen and (min-width: 768px) {
  #footer {}
  #footer a {}
}


/* Medium Devices, Tablets */

@media screen and (min-width: 1024px) {
  #footer {}
  #footer a {}
}


/* Large Devices, Wide Screens */

@media screen and (min-width: 1200px) {
  #footer {
    margin-top: 4rem;
    padding-top: 2rem;
  }
  #footer h1 {
    margin-top: 2rem;
    font-size: 23px;
  }
  #footer ul>li {
    position: relative;
    margin-left: -35px;
  }
  #footer .contact-info {
    padding-bottom: 1.75rem;
    font-size: 16px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
  #footer .contact-phone {
    font-size: 20px;
    font-weight: 600;
  }
  #footer .copyright {
    font-size: 12px;
    !important margin-top: 2rem;
    !important
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<section id="footer">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-sm-12 col-xs-12">
        <h2 class="text-left">Camping</h2>
        <ul>
          <li><a href="photos.php">— Photos</a></li>
          <li><a href="tarifs.php">— Tarifs</a></li>
          <li><a href="tarifs.php#promo">— Promotions</a></li>
        </ul>

        <h2 class="text-left">Services</h2>
        <ul>
          <li><a href="services.php">— Services</a></li>
          <li><a href="services.php#events">— Mariages et événements corporatifs</a></li>
        </ul>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-4 col-sm-12 col-xs-12">
        <h2 class="text-left">Activités</h2>
        <ul>
          <li><a href="activites.php">— Activités du camping</a></li>
          <li><a href="activites.php#calendar-section">— Calendrier des activités</a></li>
          <li><a href="activites.php#country">— Festival western</a></li>
          <li><a href="activites.php">— Activités à proximité</a></li>
        </ul>

        <h2 class="text-left">Roulottes Prêts-à-Camper</h2>
        <ul>
          <li><a href="roulottes-a-louer.php">— Roulottes Prêts-à-Camper</a></li>
          <li><a href="roulottes-a-louer.php">— Tarifs</a></li>
          <li><a href="roulottes-a-louer.php">— Règlements</a></li>
        </ul>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-4 col-sm-12 col-xs-12">
        <h2 class="text-left">Contact</h2>

        <ul>
          <li class="contact-info"><a href="#">[email protected]</a></li>
          <li class="contact-phone"><a href="#">819 864-4731</a></li>
          <li class="contact-info"><a href="services.php#plan">Plan du site</a></li>
          <li class="contact-info"><a href="https://campingbeau-lieu.com/en/">English</a></li>
        </ul>
        <h2 class="text-left">Nous suivre : </h2>
        <a href="https://www.facebook.com/Camping-Beau-lieu-110223305786148/" target="_blank"><i class="fa fa-3x fa-facebook-official" aria-hidden="true"></i></a>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12 copyright text-center">Camping Beau-Lieu © 2017-
        <?php echo date('Y');?> | Conception par <a href="https://ignitely.ca">ignitely</a> avec <i class="fa fa-coffee" aria-hidden="true"></i> et <i class="fa fa-heart" aria-hidden="true" style="color:#ff69b4;"></i></div>
    </div>
  </div>
</section>