bootstrap 4 get div under buttons centred : I'm bussy with a navbar that collapses in mobile, so far so good. In desktop it looks like i want, but in mobile view i want the div with id plaatsen under the menu buttons and both in width 100%.

So like this

                  Logo
________________________________
    Button 1    Button 2    button 3
________________________________
                plaatsen
_________________________________

Code:

    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark justify-content-center">
        <div class="container" style="padding: 0px;">
            <a class="navbar-brand d-flex mr-auto" href="<?php echo $this->url('home'); ?>" target="_self" style="background-color: red;width:350px;">
                <img src="<?= $this->basePath('img/logo.png') ?>"/>
            </a>
            <div id="buttons">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#button1" aria-controls="button1" aria-expanded="false" aria-label="Toggle navigation" style="margin-top: 12px;">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#button2" aria-controls="button2" aria-expanded="false" aria-label="Toggle navigation" style="margin-top: 12px;">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#button3" aria-controls="button3" aria-expanded="false" aria-label="Toggle navigation" style="margin-top: 12px;">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="button2">
            <ul class="navbar-nav mx-auto w-100 justify-content-center" style="background-color: green;">
                <li class="nav-item active">
                    <form class="navbar-form mx-auto" role="search">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search">
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-default" style="border-color: white;">Submit</button>                
                            </span>
                        </div>
                    </form>
                </li>
            </ul>
            </div>
            
            <div class="flex-md-column ml-auto w-30 justify-content-end">
                <div style="text-align: right;" id="plaatsen">
                plaatsen
                </div>
                <div class="collapse navbar-collapse  " id="button1">
                <ul class="nav navbar-nav  ">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Bedrijfsvermelding<span class="sr-only">(current)</span></a>
                    </li>                        
                    <li class="nav-item active">
                        <a class="nav-link" href="<?= $this->basePath('inloggen') ?>">Inloggen<span class="sr-only">(current)</span></a>
                    </li>
                </ul>
                </div>
            </div>
        </div>
    </nav>

