Html 如何在较小分辨率上更改引导布局元素？

我想在移动分辨率（最大宽度：768px）和更小的分辨率下更改引导布局元素在不同位置的位置

这张照片显示了我需要做的事情：

我需要如何以及需要做哪些改变来实现这一目标

我的代码：

HTML

<!-- FOOTER-->

        <section id="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-2 left-col">
                        <p><a class="contacts" href="#">CONTACTS</a></p>
                    </div>
                    <div class="col-md-2 contact-person">
                        <h2>STUART LAWSON</h2>
                        <p>20 7409 8920</p>
                        <p>07870 555 930</p>
                        <p><a class="email" href="#">slawson@savills.com</a></p>
                    </div>
                    <div class="col-md-2 contact-person">
                        <h2>JOSH LAMB</h2>
                        <p>020 7409 8891</p>
                        <p>07976 988 486</p>
                        <p><a class="email" href="#">jlamb@savills.com</a></p>
                    </div>
                    <div class="col-md-2 contact-person">
                        <h2>SAM BOREHAM</h2>
                        <p>020 7710 7963</p>
                        <p>07917 635 465</p>
                        <p><a class="email" href="#">samb@gmreal.com</a></p>
                    </div>
                    <div class="col-md-2 contact-person">
                        <h2>DAN ROBERTS</h2>
                        <p>020 7710 7963</p>
                        <p>07801 143 909</p>
                        <p><a class="email" href="#">danr@gmreal.com</a></p>
                    </div>
                    <div class="col-md-2 right-col">
                        <h2><a class="info" href="#">info@theriverbuilding.com</a></h2>
                    </div>
                </div>
            </div>
        </section> <!-- END END FOOTER -->

---

使用2行而不是1行来堆叠元素

  <section id="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2 left-col">
                    <p><a class="contacts" href="#">CONTACTS</a></p>
                </div>
              </div>
              <div class="row">
                <div class="col-md-2 contact-person">
                    <h2>STUART LAWSON</h2>
                    <p>20 7409 8920</p>
                    <p>07870 555 930</p>
                    <p><a class="email" href="#">slawson@savills.com</a></p>
                </div>
                <div class="col-md-2 contact-person">
                    <h2>JOSH LAMB</h2>
                    <p>020 7409 8891</p>
                    <p>07976 988 486</p>
                    <p><a class="email" href="#">jlamb@savills.com</a></p>
                </div>
                <div class="col-md-2 contact-person">
                    <h2>SAM BOREHAM</h2>
                    <p>020 7710 7963</p>
                    <p>07917 635 465</p>
                    <p><a class="email" href="#">samb@gmreal.com</a></p>
                </div>
                <div class="col-md-2 contact-person">
                    <h2>DAN ROBERTS</h2>
                    <p>020 7710 7963</p>
                    <p>07801 143 909</p>
                    <p><a class="email" href="#">danr@gmreal.com</a></p>
                </div>
                <div class="col-md-2 right-col">
                    <h2><a class="info" href="#">info@theriverbuilding.com</a></h2>
                </div>
            </div>
        </div>
    </section> <!-- END END FOOTER -->

斯图尔特·劳森
207408920

07870555930


乔希·兰姆
020 7409 8891

07976988486


萨姆·博雷厄姆
020 7710 7963

07917635465


丹罗伯茨
020 7710 7963

07801143909

你能说得更具体些吗？我不知道用css代码写什么。如果你看到上面，我将你的联系人“元素嵌套在联系人信息”元素上方的另一行中

  <section id="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-2 left-col">
                    <p><a class="contacts" href="#">CONTACTS</a></p>
                </div>
              </div>
              <div class="row">
                <div class="col-md-2 contact-person">
                    <h2>STUART LAWSON</h2>
                    <p>20 7409 8920</p>
                    <p>07870 555 930</p>
                    <p><a class="email" href="#">slawson@savills.com</a></p>
                </div>
                <div class="col-md-2 contact-person">
                    <h2>JOSH LAMB</h2>
                    <p>020 7409 8891</p>
                    <p>07976 988 486</p>
                    <p><a class="email" href="#">jlamb@savills.com</a></p>
                </div>
                <div class="col-md-2 contact-person">
                    <h2>SAM BOREHAM</h2>
                    <p>020 7710 7963</p>
                    <p>07917 635 465</p>
                    <p><a class="email" href="#">samb@gmreal.com</a></p>
                </div>
                <div class="col-md-2 contact-person">
                    <h2>DAN ROBERTS</h2>
                    <p>020 7710 7963</p>
                    <p>07801 143 909</p>
                    <p><a class="email" href="#">danr@gmreal.com</a></p>
                </div>
                <div class="col-md-2 right-col">
                    <h2><a class="info" href="#">info@theriverbuilding.com</a></h2>
                </div>
            </div>
        </div>
    </section> <!-- END END FOOTER -->