estoy haceiendo un sitio web tengo un problema con el footer. Sigo los pasos de bootstrap, pero tengo problemas con el responsive.

Aclaro que arriba del footer hay texto e imagenes y si hago esto:

  `.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}`

el footer me queda en medio.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .footer {
    background-image: url("https://i.sstatic.net/AZ2Xw.png");
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    margin-top: 580px;
    width: 100%;
    height: 300px; /* Set the fixed height of the footer here */
    }

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="stn" >
    <link rel="icon" href="favicon.ico">
    <title>Electrocer San Telmo</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
    <link href="main.css" rel="stylesheet">
    </head>
    <body>
    <footer class="footer">
    <div class="container text-white">
    <br>
    <div class="row">
    <div class="col-md-4 col-lg-2">
    <h4>Facebook</h4>
    <p><i class="fab fa-facebook"></i> <a href="#">/usuario</a></p>
    </div>
    <div class="col-md-4 col-lg-4">
    <h4 id="contacto">Contacto</h4>
    <p>San Telmo</p>
    <p>Direcci&oacute;n: CABA - Buenos Aires<br>
    Tel&eacute;fonos:<br>
    eMail:</p>
    </div>
    <div class="col-md-4 col-lg-6">
    <p>
    Maoa
    </p>
    </div>
    </div>
    </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    </body>
    </html>

<!-- end snippet -->