Kак в bootstrap 4 в nav поставить один див ниже другова?

Question

[karenshahmuradyan]

<nav class="navbar navbar-expand-md " style="padding: 0">
    <div id="top_extra_menu" class="navbar d-none d-sm-block d-xs-block">
        <ul class="nav navbar-nav pull-right">
            <li><a href="#">Pricing</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Site Map</a></li>
        </ul>
    </div>
    <div class="collapse navbar-collapse" id="navbarsExampleDefault" >
        <ul class="navbar-nav mr-auto">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdownOpportunities" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Opportunities</a>
                <div class="dropdown-menu" aria-labelledby="dropdownOpportunities">
                    <a class="dropdown-item" href="#">Grants</a>
                    <a class="dropdown-item" href="#">Scholarships</a>
                    <a class="dropdown-item" href="#">Fellowships</a>
                    <a class="dropdown-item" href="#">Awards</a>
                    <a class="dropdown-item" href="#">Study</a>
                    <a class="dropdown-item" href="#">Online</a>
                    <a class="dropdown-item" href="#">Prize</a>
                    <a class="dropdown-item" href="#">Publications</a>
                    <a class="dropdown-item" href="#">Competition</a>
                    <a class="dropdown-item" href="#">Financial aid</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Summer Schools</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdownConferences" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Conferences</a>
                <div class="dropdown-menu" aria-labelledby="dropdownConferences">
                    <a class="dropdown-item" href="#">Call for Papers</a>
                    <a class="dropdown-item" href="#">Conference Programs</a>
                    <a class="dropdown-item" href="#">Abstracts</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdownEvents" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Events</a>
                <div class="dropdown-menu" aria-labelledby="dropdownEvents">
                    <a class="dropdown-item" href="#">Trainings</a>
                    <a class="dropdown-item" href="#">Seminars</a>
                    <a class="dropdown-item" href="#">Discussion</a>
                    <a class="dropdown-item" href="#">Meetings</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdownJobs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Jobs</a>
                <div class="dropdown-menu" aria-labelledby="dropdownJobs">
                    <a class="dropdown-item" href="#">Vacancies</a>
                    <a class="dropdown-item" href="#">Internships</a>
                    <a class="dropdown-item" href="#">Volunteering</a>
                </div>
            </li>
        </ul>
    </div>
</nav>