I can´t get the Bootstrap 4 tabs to stack on smaller devices. I would like them to stack two in a row for small tablets and one in a row on mobile devices. I have tried to put the li inside divs with col-md-4, but that does not seem to work. Here is my code:

```
<div class="container">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs nav-justified" role="tablist">
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel5" role="tab"><img src="selskapslokaler-ikon.png" style="width: 100%"> </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel6" role="tab"> <img src="gymsaler-ikon.png" style="width: 100%"></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel7" role="tab"> <img src="bibliotek-ikon.png" style="width: 100%"> </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#panel8" role="tab"> <img src="badetilbud-ikon.png" style="width: 100%"> </a>
        </li>
    </ul>
    <!-- Tab panels -->
    <div class="tab-content">
        <!--Panel 1-->
        <div class="tab-pane fade in show  minus-margin" id="panel5" role="tabpanel">
            <br>
            <div class="form-group">
                <input type="email" class="form-control date-input" id="exampleInputTil1" placeholder="Fra">
                <input type="time" class="form-control time-input" id="exampleInputTimeTil1" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice1" placeholder="Fra kr">
                <input type="number" class="form-control size-input" id="exampleInputSize1" placeholder="Fra kvm">
    <br>
                <input type="email" class="form-control date-input" id="exampleInputFra1"  placeholder="Til">
                <input type="time" class="form-control time-input" id="exampleInputTimeFra1" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice2" placeholder="Til kr">
                <input type="number" class="form-control size-input" id="exampleInputSize2" placeholder="Til kvm">
                <br>
                <button class="btn btn-secondary" type="button">Søk!</button>

            </div>
        </div>
        <!--/.Panel 1-->
        <!--Panel 2-->
        <div class="tab-pane fade minus-margin" id="panel6" role="tabpanel">
            <br>
            <div class="form-group">
                <input type="email" class="form-control date-input" id="exampleInputTil2" placeholder="Fra">
                <input type="time" class="form-control time-input" id="exampleInputTimeFra2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice1" placeholder="Fra kr">
                <br>
                <input type="email" class="form-control date-input" id="exampleInputFra2"  placeholder="Til">
                <input type="time" class="form-control time-input" id="exampleInputTimeTil2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice2" placeholder="Til kr">
                <br>
                <button class="btn btn-secondary" type="button">Søk!</button>

            </div>
        </div>
        <!--/.Panel 2-->
        <!--Panel 3-->
        <div class="tab-pane fade minus-margin" id="panel7" role="tabpanel">
            <br>
            <div class="form-group">
                <input type="email" class="form-control date-input" id="exampleInputTil2" placeholder="Fra">
                <input type="time" class="form-control time-input" id="exampleInputTimeFra2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice1" placeholder="Fra kr">
                <br>
                <input type="email" class="form-control date-input" id="exampleInputFra2"  placeholder="Til">
                <input type="time" class="form-control time-input" id="exampleInputTimeTil2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice2" placeholder="Til kr">
                <br>
                <button class="btn btn-secondary" type="button">Søk!</button>

            </div>
        </div>
        <!--/.Panel 3-->
        <div class="tab-pane fade minus-margin" id="panel8" role="tabpanel">
            <br>
            <div class="form-group">
                <input type="email" class="form-control date-input" id="exampleInputTil2" placeholder="Fra">
                <input type="time" class="form-control time-input" id="exampleInputTimeFra2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice1" placeholder="Fra kr">
                <br>
                <input type="email" class="form-control date-input" id="exampleInputFra2"  placeholder="Til">
                <input type="time" class="form-control time-input" id="exampleInputTimeTil2" placeholder="Kl.">
                <input type="number" class="form-control price-input" id="exampleInputPrice2" placeholder="Til kr">
                <br>
                <button class="btn btn-secondary" type="button">Søk!</button>
            </div>
        </div>
    </div>
    </div>

```

I have also tried to change the tabs to pills without any success. If there is not any simple, effective solution to this, are there any other ways to accomplish this layout on my website?