Bootstrap 4 Order div列

时间:2018-12-10 17:32:54

标签: html css bootstrap-4

我想在页脚中为div和mob分辨率重新排序div,但无法获得下面的社交链接地址栏,有人可以提供解决方案,为什么它不起作用:徽标和社交链接是否存在问题?嵌套在同一个div中?

<footer class="container-fluid">
        <div class="row">
            <div class="col-12 col-md-5 col-lg-4 d-flex justify-content-center align-items-end address-block">
                <p class="address-footer">
                    <em>Cyalk Cmunions Ltd</em><br>
                    Heate use<br>
                    Rans Lane<br>
                    Aybury<br>
                    Bus<br>
                    H9 8RT<br><br>

                    <span>Company registered number: 06416</span>
                </p>
            </div>
            <div class="col-12 col-md-2 col-lg-4 d-flex justify-content-center align-items-center flex-column logof-block">
                <div class="logo-footer">
                    <img src="~/img/logo-footer-rgb-group.png" alt="logo-footer">
                </div>
                <div class="social-footer">
                    <a href="#">
                        <img class="bloggerw-icon" src="~/img/blogger.png" alt="blogger icon">
                    </a>
                    <a href="https://www.facebook.com/cikcomms/">
                        <img class="facew-icon" src="~/img/facebook.png" alt="face icon">
                    </a>
                    <a href="#">
                        <img class="linkedinw-icon" src="~/img/linked-in.png" alt="linkedin icon">
                    </a>
                    <a href="#">
                        <img class="pinterestw-icon" src="~/img/pinterest.png" alt="pinterest icon">
                    </a>
                    <a href="https://twitter.com/CitkComms?lang=en">
                        <img class="twitterw-icon" src="~/img/twitter.png" alt="twitter icon">
                    </a>
                    <a href="#">
                        <img class="youtubew-icon" src="~/img/youtube.png" alt="youtube icon">
                    </a>
                    <a href="#">
                        <img class="instagram-icon" src="~/img/instagram.png" alt="instragram icon">
                    </a>
                </div>
            </div>

            <div class="col-12 col-md-5 col-lg-4 d-flex justify-content-center align-items-end contactf-block">
                <p class="contact-footer">
                    New Business Sales   <em class="nr1f">03 2414 101</em><br />
                    Provisioning & Engineering   <em class="nr2f">33 2414 102</em><br />
                    Support   <em class="nr3f">0333 2414 103</em><br />
                    Accounts & Billing  <em class="nr4f">33 2414 104</em><br><br />

                    <span>Terms, Conditions and Complaints</span>
                </p>
            </div>
        </div>

    </footer>

///////////////// ////////// order div用于较小的屏幕////////

@media (max-width: 768px) {

    .logo-footer {
        order: 1;
    }
    .address-block {
        order: 2;
    }
    .social-footer {
        order: 3;
    }
    .contactf-block {
        order: 4;
    }
}

1 个答案:

答案 0 :(得分:0)

所有内容都必须在同一个div中,无论您选择的是.row还是.col。

您还可以使用具有响应能力的bootstraps reorder classes