Is it possible to make a bootstrap collapse with grid columns?

Question

I've got a grid set up with 4 columns across that hold 4 buttons (1 each). In the next row I have full wicontent i want to show using the bootstrap collapse function. My issue is that I cannot make the open content collapse back when a second button is clicked. I think the issue is with it not being in the same parent div as the button. Since this isn't a normal accordion setup with panels, I'm not sure how to make it work....

I have bootstrap 4 Beta set up in the head like this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<script  src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

Here's the current code:

<div class="main-buttons" id="stew-buttons">
<div class="row">
    <div class="col-md-3">  
        <a data-toggle="collapse" data-target="#individual" data-parent="#stew-buttons" aria-expanded="false" class="collapse-link">
            <img src="button.jpg" class="img-responsive img-circle"><br>
            <strong class="collapse-title">Individual Resources</strong>
        </a>
    </div>
    <div class="col-md-3">  
        <a data-toggle="collapse" data-target="#churchresources" data-parent="#stew-buttons" aria-expanded="false" class="collapse-link">
            <img src="button.jpg" class="img-responsive img-circle"><br>
            <strong class="collapse-title">Church Resources</strong>
        </a>
    </div>
    <div class="col-md-3">  
        <a data-toggle="collapse" data-target="#frenchresources" data-parent="#stew-buttons" aria-expanded="false" class="collapse-link">
            <img src="button.jpg" class="img-responsive img-circle"><br>
            <strong class="collapse-title">French Resources</strong>
        </a>
    </div>
    <div class="col-md-3">  
        <a data-toggle="collapse" data-target="#downloads" data-parent="#stew-buttons" aria-expanded="false" class="collapse-link">
            <img src="button.jpg" class="img-responsive img-circle"><br>
            <strong class="collapse-title">Downloads</strong>
        </a>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
         <div id="individual" class="collapse">
            content 1
        </div>
        <div id="churchresources" class="collapse">
            content 2
        </div>
        <div id="frenchresources" class="collapse">
            content 3
        </div>
        <div id="downloads" class="collapse">
            content 4
        </div>            
    </div>
</div>

Fiddle here: https://jsfiddle.net/0vgwws09/