javascript - 如何让这两个 "col"在手机上以不同的顺序堆叠？ Bootstrap 4

Question

我有这些 col-md-8 和 col-md-4 它们在桌面上正确显示，但在移动设备上它们以错误的顺序堆叠。我如何附加 Bootstrap 类以使它们以另一种方式堆叠。

<footer class="container-fluid footerInfo">
    <div class="row">
        <div class="col-md-8 f1">
            <h6>Advocacy Inc.</h6>
            <div class="contactWidget1">
                <p><a href="tel:1(505) 266-3166">t. +1(505)266-3166</a></p>
                <p><a href="tel:1(505)254-2559">f. +1(505)254-2559</a></p><br><br>
                <p><a href="mailto:kids@nmadvocacy.org"><i class="mailIcon fa fa-envelope-o"> kids@nmadvocacy.org</i></a></p>

            </div>
            <div class="contactWidget2">
                <p>6301 Fourth NW Suite 3<br>Albuquerque NM 87107</p>
                <p><a href="https://goo.gl/maps/yymj6bd7mnC2">View on a map.</a></p><br>
                <p class="executive">Executive Director: Gini Silva</p>
            </div>
            <ul class="f3">
                <img  class="logo2" src="<?php echo get_bloginfo('template_url') ?>/assets/wlogo.png">
                <li><p>&copy;-Advocacy Inc. 2018</p></li>
            </ul>
        </div>
        <div class="col-md-4 headerAfil">
            <div class="footerAfil">
                <h6>We are proudly supported by:</h6>
                <ul>
                    <li><a href="#">New Mexico Courts.</a></li>
                    <li><a href="#">State Bar of New Mexico.</a></li>
                    <li><a href="#">United Way of Central New Mexico.</a></li>
                </ul>
            </div>
            <div class="footerAfil2">
                <a href="http://www.civicvalues.org/"><img src="<?php echo get_bloginfo('template_url') ?>/assets/associations/ccv.png"></a>
            </div>
            <ul class="f2">
                <li><i class="fa fa-facebook"></i></li>
                <li><i class="fa fa-linkedin"></i></li>
                <li><i class="fa fa-twitter"></i></li>
                <li><i class="fa fa-folder-o"></i></li>
                <li><i class="fa fa-map-pin"></i></li>
                <li><i class="fa fa-phone"></i></li>
            </ul>
        </div>
    </div>
</footer>

Answer 1

bootstrap 文档解释了所有这些。不过，我不确定您使用的是 Bootstrap 3 还是 4。

Bootstrap 3 文档:https://getbootstrap.com/docs/3.3/css/#grid-column-ordering

Bootstrap 4 文档:https://getbootstrap.com/docs/4.2/layout/grid/#reordering