После использования сетки начальной загрузки ссылки нижнего колонтитула изменяются на элемент блока на экранах небольшого размера.

Question

Я не нашел решения, поэтому выкладываю это. Я работаю над нижним колонтитулом, используя систему сетки начальной загрузки. Раздел об авторских правах находится слева, а некоторые ссылки - справа. На экранах размером более 768 пикселей (col-md-6) выглядит хорошо. Но ссылки справа изменяются на элементы уровня блока (например, список: не встроенный) на экранах размером менее 768 пикселей (от col-sm-12 до col-12). Я хочу, чтобы ссылки были встроенными и располагались ниже раздела об авторских правах (а не друг над другом) на экранах размером менее 768 пикселей. Вот код:

HTML

<footer class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-12 col-12">
                <p>
                    Copyright &copy; 2019. All Rights Reserved.
                </p>
            </div>
            <div class="col-md-6 col-sm-12 col-12">
                <ul class="navbar-nav float-right">
                    <li class="nav-item">
                        <a class="nav-link" href="privacy-policy.html">Privacy Policy</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="terms-of-service.html">Terms of Service</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.html">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</footer>

CSS

footer{
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}

footer .row{
    width: 100%;
}

footer .row p {
    margin: 0;
    padding: 0;
    padding-top: 7px;
    font-size: 0.9rem;
}

Вот две картинки, чтобы объяснить ситуацию дальше: