make panel group responsive

Question

I have the following block of Html/Bootstrap 4 code

<div class="col-xs-12 col-md-4">
    <div class="panel-group" id="panel-790692">
        <th:block th:each="state : ${stateIterable}">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <a class="panel-title" data-toggle="collapse"
                        data-parent="#panel-790692"
                        th:href="|#panel-element-${#strings.replace(state.state,' ','-')}|"
                        th:text="${state.state}">State Name</a>
                </div>
                <div
                    th:id="|panel-element-${#strings.replace(state.state,' ','-')}|"
                    class="panel-collapse collapse in">
                    <th:block th:each="city : ${state.cities}">
                        <div class="panel-body" th:text="${city.city}"></div>
                    </th:block>
                </div>

            </div>
        </th:block>
    </div>
</div>

Right now all the states show up as one long vertical column, how can I make this responsive? I want it to take 3 or 4 columns on desktops and one on mobile.

Here is the fiddle

https://www.codeply.com/go/pA3GBinWx4

Answer 1

add col-md-3 to panel panel-default class

body {
    margin: 10px;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="padding-top: 200px; padding-bottom: 100px;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="panel-group" id="panel-790692">
                    <div class="panel panel-default col-md-3">
                        <div class="panel-heading"> <a class="panel-title" data-toggle="collapse" data-parent="#panel-790692" href="#panel-element-Alabama">Alabama</a> </div>
                        <div class="panel-collapse collapse in col-md-3" id="panel-element-Alabama">
                            <div class="panel-body">Auburn</div>
                            <div class="panel-body">Birmingham</div>
                            <div class="panel-body">Dothan</div>
                            <div class="panel-body">Gadsden</div>
                            <div class="panel-body">Huntsville</div>
                            <div class="panel-body">Mobile</div>
                            <div class="panel-body">Montgomery</div>
                            <div class="panel-body">Muscle Shoals</div>
                            <div class="panel-body">Tuscaloosa</div>
                        </div>
                    </div>
                    <div class="panel panel-default col-md-3">
                        <div class="panel-heading"> <a class="panel-title" data-toggle="collapse" data-parent="#panel-790692" href="#panel-element-Alaska">Alaska</a> </div>
                        <div class="panel-collapse collapse in" id="panel-element-Alaska">
                            <div class="panel-body">Anchorage</div>
                            <div class="panel-body">Fairbanks</div>
                            <div class="panel-body">Juneau</div>
                            <div class="panel-body">Kenai Peninsula</div>
                        </div>
                    </div>
                    <div class="panel panel-default col-md-3">
                        <div class="panel-heading"> <a class="panel-title" data-toggle="collapse" data-parent="#panel-790692" href="#panel-element-Arizona">Arizona</a> </div>
                        <div class="panel-collapse collapse in" id="panel-element-Arizona"> </div>
                    </div>
                    <div class="panel panel-default col-md-3">
                        <div class="panel-heading"> <a class="panel-title" data-toggle="collapse" data-parent="#panel-790692" href="#panel-element-Arkansas">Arkansas</a> </div>
                        <div class="panel-collapse collapse in" id="panel-element-Alaska">
                            <div class="panel-body">Anchorage</div>
                            <div class="panel-body">Fairbanks</div>
                            <div class="panel-body">Juneau</div>
                            <div class="panel-body">Kenai Peninsula</div>
                        </div>
                    </div>
                    <div class="panel panel-default col-md-3">
                        <div class="panel-heading"> <a class="panel-title" data-toggle="collapse" data-parent="#panel-790692" href="#panel-element-California">California</a> </div>
                        <div class="panel-collapse collapse in" id="panel-element-Alaska">
                            <div class="panel-body">Anchorage</div>
                            <div class="panel-body">Fairbanks</div>
                            <div class="panel-body">Juneau</div>
                            <div class="panel-body">Kenai Peninsula</div>
                        </div>
                    </div>
                    <div class="panel panel-default col-md-3">
                        <div class="panel-heading"> <a class="panel-title" data-toggle="collapse" data-parent="#panel-790692" href="#panel-element-Colorado">Colorado</a> </div>
                        <div class="panel-collapse collapse in" id="panel-element-Alaska">
                            <div class="panel-body">Anchorage</div>
                            <div class="panel-body">Fairbanks</div>
                            <div class="panel-body">Juneau</div>
                            <div class="panel-body">Kenai Peninsula</div>
                        </div>
                    </div>
                    <div class="panel panel-default col-md-3">
                        <div class="panel-heading"> <a class="panel-title" data-toggle="collapse" data-parent="#panel-790692" href="#panel-element-Connecticut">Connecticut</a> </div>
                        <div class="panel-collapse collapse in" id="panel-element-Alaska">
                            <div class="panel-body">Anchorage</div>
                            <div class="panel-body">Fairbanks</div>
                            <div class="panel-body">Juneau</div>
                            <div class="panel-body">Kenai Peninsula</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end container -->
</div>