<div class="widget widget_media_image">
  <a href="#"><img class="image" src="{{media url="logo/default/logo_ecomblack_lg.png"}}" alt="" width="202" height="80" /></a>
</div>
<div class="widget contact-info">
  <div class="contact-info contact-info-block">
    <ul class="contact-details">
      <li><i class="fab fa-whatsapp"></i> <strong>Call us now:</strong> <span>+123 5678 890</span></li>
      <li>
        <i class="far fa-envelope"></i> <strong>e-mail address:</strong> <span>
        <a href="mailto:mail@example.com">mail@example.com</a></span>
      </li>
    </ul>
  </div>
</div>
<div class="widget follow-us">
  <h3 class="widget-title">Follow Us</h3>
  <div class="share-links">
    <a href="#" rel="nofollow" target="_blank" title="Facebook" class="share-facebook">Facebook</a> <a href="#" rel="nofollow" target="_blank" title="Twitter" class="share-twitter">Twitter</a>
    <a href="#" rel="nofollow" target="_blank" title="Linkedin" class="share-linkedin">Linkedin</a>
  </div>
</div>
<style>
  .footer .contact-details {
    display: flex;
    flex-wrap: wrap;
  }
  .footer .contact-info li {
    line-height: 1.8;
  }
  .footer .contact-info .contact-details span, .footer .contact-info-block .contact-details a {
    font-size: 16px;
    color: #222529;
    font-weight: 700;
  }
  .footer .widget + .widget {
    margin-top: 1.875rem;
  }
  .footer .widget.contact-info .contact-details strong, .footer .follow-us .widget-title {
    font-weight: 600;
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    color: #777;
    margin-bottom: 0;
  }
  .footer .follow-us .share-links a {
    width: 30px;
    height: 30px;
    border-radius: 20px;
    border: none;
    box-shadow: none;
    margin: 4px 0 0;
  }
  .footer .follow-us .share-links a:not(:hover) {
    background: none;
    color: #333;
  }

  @media (min-width: 768px) {
    .footer .contact-details li {
      max-width: 50%;
      flex: 0 0 50%;
    }
    .footer-middle .col-lg-6, .footer .contact-details {
      display: flex;
      flex-wrap: wrap;
    }
    .footer-middle .col-lg-6>.widget:first-child {
      max-width: 100%;
      flex: 0 0 100%;
    }
    .footer-middle .col-lg-6 .widget.contact-info {
      max-width: 60%;
      flex: 0 0 60%;
    }
  }
</style>