JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-lg-12">
    <div class="footer-links">
      <div class="row">
        <div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#about">
          <h4 class="panel-title">
          <a class="accordion-toggle">
            <i class="material-icons">&#xE145;</i>
            Link Head
          </a>
        </h4>
          <ul class="visible-sm visible-md visible-lg collapse" id="about">
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
          </ul>
        </div>
        <div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#why">
          <h4 class="panel-title">
          <a class="accordion-toggle">
            <i class="material-icons">&#xE145;</i>
            Link Head
          </a>
        </h4>
          <ul class="visible-sm visible-md visible-lg collapse" id="why">
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
          </ul>
        </div>
        <div class="col-md-3 col-sm-4 panel" data-toggle="collapse" data-target="#quicklinks">
          <h4 class="panel-title">
          <a class="accordion-toggle">
            <i class="material-icons">&#xE145;</i>
            Link Head
          </a>
        </h4>
          <ul class="visible-sm visible-md visible-lg collapse" id="quicklinks">
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a href="">link</a></li>
            <li><a...

JavaScript

$('[data-toggle="collapse"]').click(function(e) {
  if ($(window).width() >= '321') {
    e.stopPropagation();

  } else if ($(window).width() <= '320') {
    $('.panel').on('click', function() {
      $('.collapse').collapse('hide');
    });

  }
});