I’m having 3 titles with a button underneath to show more info about the subject. 

I made a script to show/hide div on the button click. When I’m on a small device the div shows underneath the subject (just like I want) as you can see here:

[This is correct on small devices](https://i.stack.imgur.com/QXHwT.png)

But when I’m on a desktop and the subjects are next to each other the div that shows pushes the other subject to the bottom. 

I would like to have the show div to be underneath the 3 subjects.

This is wrong:

[This is wrong](https://i.stack.imgur.com/a7J6d.png)

[How they all sould be](https://i.stack.imgur.com/jZ3ve.png)

Anny idea on how to do this?

Also, is the a way to only show one div at the time, so when I open a new div, the previous one should close.

HTML:

```
 <!-- TOP 3 SERVICES -->
<div class="container">
    <div class="row">
        <div class="col-md-4 col-12 text-center mt-5">
            <img src="images/index/tijd.png" alt="time" class="mb-5 img-fluid">
            <h2>Always on time</h2>
            <button class="btn mybtn mt-2" onclick="showInfo('tijd')">See more</button>
        </div>

        <div class="service-detail mt-5 service-detail" id="tijd">
            <div class="col-12 col-md-8 offset-md-2 text-center">
                <h1 class="mt-5"><img src="images/index/tijd.png" alt="" class="mr-5">Always on time</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore
                    et dolore magna aliqua consectetur adipiscing elit.
                    <br>
                    <br>
                    Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
                <button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('tijd')">See less</button>
            </div>
        </div>

        <div class="col-md-4 col-12 text-center mt-5">
            <img src="images/index/trust.png" alt="trust" class="mb-5 img-fluid">
            <h2>Trust</h2>
            <button class="btn mybtn mt-2" onclick="showInfo('trust')">See more</button>
        </div>

        <div class="service-detail mt-5 service-detail" id="trust">
            <div class="col-12 col-md-8 offset-md-2 text-center">
                <h1 class="mt-5"><img src="images/index/trust.png" alt="" class="mr-5">Trust</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore
                    et dolore magna aliqua consectetur adipiscing elit.
                    <br>
                    <br>
                    Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
                <button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('trust')">See less</button>
            </div>
        </div>

        <div class="col-md-4 col-12 text-center mt-5 mb-5">
            <img src="images/index/24.png" alt="24/7" class="mb-5 img-fluid">
            <h2>24/7 support</h2>
            <button class="btn mybtn mt-2" onclick="showInfo('24')">See more</button>
        </div>
    </div>

    <div class="service-detail mt-5 service-detail" id="24">
        <div class="col-12 col-md-8 offset-md-2 text-center">
            <h1 class="pt-5"><img src="images/index/24.png" alt="" class="mr-5">24/7 support</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                labore
                et dolore magna aliqua consectetur adipiscing elit.
                <br>
                <br>
                Duis aute irure dolor in reprehenderit in voluptate consectetur adipiscing elit.</p>
            <button class="btn mybtn mt-2 col-12 col-md-4" onclick="showInfo('24')">See less</button>
        </div>
    </div>
</div>

```

JS:

```
function showInfo(id) {
  var a = document.getElementById(id);
  if (a.style.display === "block") {
    a.style.display = "none";
  } else {
    a.style.display = "block";
  }
}

```