使用柵格系統和flex佈局開發響應式頁面源碼

時間 2020-05-20

標籤使用柵格系統 flex 佈局開發響應頁面源碼欄目 Flex 简体版

原文原文鏈接

響應式佈局的原理
xsmall <576px
small >=576px
medium >=768px
large >=992px
xlarge >=1200pxcss

接下來是效果圖html

中屏及以上效果瀏覽器

移動端效果ide

方案一：使用柵格系統開發響應式頁面svg

index.html佈局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>響應式佈局</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/grid.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <header class="header-container">
        <div class="container">
            <div class="row">
                <div class="header-logo-container col-8 col-md-3">
                    <a href="./index.html" class="header-logo">
                        <img src="img/logo.svg" alt="logo">
                    </a>
                </div>
                <!-- 下拉圖標（三條槓），中屏隱藏 -->
                <div class="header-btn-container col-4 d-md-none">
                    <button type="button" class="btn-toggle" id="btn-toggle">
                        <span class="btn-toggle-bar"></span>
                        <span class="btn-toggle-bar"></span>
                        <span class="btn-toggle-bar"></span>
                    </button>
                </div>
                <!-- 中屏導航 -->
                <nav class="header-nav-container col-md-9 d-none d-md-block">
                    <ul class="header-nav">
                        <li class="header-nav-item">
                            <a href="###" class="header-nav-link">手機&amp;平板</a>
                        </li>
                        <li class="header-nav-item">
                            <a href="###" class="header-nav-link">電視&amp;影音</a>
                        </li>
                        <li class="header-nav-item">
                            <a href="###" class="header-nav-link">生活家電</a>
                        </li>
                        <li class="header-nav-item">
                            <a href="###" class="header-nav-link">電腦/辦公/存儲</a>
                        </li>
                        <li class="header-nav-item">
                            <a href="###" class="header-nav-link">網上商城</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <!-- 移動端導航 -->
    <nav class="nav-container d-md-none" id="nav">
        <ul class="container">
            <li><a href="###" class="nav-link">手機&amp;平板</a></li>
            <li><a href="###" class="nav-link">電視&amp;影音</a></li>
            <li><a href="###" class="nav-link">生活家電</a></li>
            <li><a href="###" class="nav-link">電腦/辦公/存儲</a></li>
            <li><a href="###" class="nav-link">網上商城</a></li>
        </ul>
    </nav>

    <div class="slider-container">
        <div class="container">
            <div class="row">
                <!-- 中屏位置往右7個網格 -->
                <div class="slider-text-container col-md-5 col-md-push-7">
                    <h3 class="slider-title">Galaxy S9｜S9+</h3>
                    <h4 class="slider-subtitle">冰藍 煥新上市</h4>
                    <div class="slider-btns">
                        <a href="###" class="btn-rounded">瞭解更多</a>
                        <a href="###" class="btn-rounded">當即購買</a>
                    </div>
                </div>
                <div class="col-md-7 col-md-pull-5">
                    <img src="img/1.png" alt="cellphone">
                </div>
            </div>
        </div>
    </div>
    <!-- 中屏一行顯示3張圖 -->
    <div class="product-container">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <a href="###" class="product-item">
                        <img src="img/2-1.jpg" alt="cellphone" class="product-img">
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="###" class="product-item">
                        <img src="img/2-2.jpg" alt="cellphone" class="product-img">
                    </a>
                </div>
                <div class="col-md-4">
                    <a href="###" class="product-item">
                        <img src="img/2-3.jpg" alt="cellphone" class="product-img">
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- 移動端回到頂部 -->
    <div class="backtop-container d-md-none">
        <a href="#" class="btn-backtop">回到頂部</a>
    </div>

    <div class="helper-container">
        <div class="container">
            <div class="helper-info-container">
                <p>* Galaxy A9s具有後置四攝功能，Galaxy A6s爲後置雙攝產品。</p>
                <p>* Galaxy S9 | S9+廣告中手機背面圖是Galaxy S9+，Galaxy S9爲背面單攝像頭產品。</p>
                <p>* 本網站的產品圖片以及型號、數據、功能、性能、規格參數等僅供參考，三星有可能對上述內容進行改進，具體信息請參照產品實物、產品說明書。</p>
                <p>* 除非經特殊說明，本網站中所涉及的數據均爲三星內部測試結果，涉及的對比均爲與三星產品相比較。</p>
            </div>
            <!-- 中屏回到頂部 -->
            <div class="row">
                <div class="helper-backtop-container col-md-2 col-md-offset-10 d-none d-md-block">
                    <a href="#" class="btn-backtop">回到頂部</a>
                </div>
            </div>
            <!-- 底部導航，中屏一行4個，小屏一行2個 -->
            <div class="row">
                <div class="col-6 col-md-3">
                    <h3 class="helper-list-title">網站地圖</h3>
                    <ul class="helper-list">
                        <li><a href="###">關於三星</a></li>
                        <li><a href="###">投資者關係</a></li>
                        <li><a href="###">新聞中心</a></li>
                        <li><a href="###">人才招聘</a></li>
                        <li><a href="###">三星開發者網站</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md-3">
                    <h3 class="helper-list-title">三星商店</h3>
                    <ul class="helper-list">
                        <li><a href="###">網上商城</a></li>
                        <li><a href="###">最新活動</a></li>
                        <li><a href="###">受權體驗店</a></li>
                        <li><a href="###">全產品專賣店</a></li>
                        <li><a href="###">三星視頻空間</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md-3">
                    <h3 class="helper-list-title">服務支持</h3>
                    <ul class="helper-list">
                        <li><a href="###">在線服務</a></li>
                        <li><a href="###">郵件諮詢</a></li>
                        <li><a href="###">聯繫咱們</a></li>
                        <li><a href="###">服務中心查詢</a></li>
                        <li><a href="###">三星專賣店招募</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md-3">
                    <h3 class="helper-list-title">官方分享</h3>
                    <ul class="helper-list">
                        <li>
                            <a href="###" class="btn-share btn-share-weixin"></a>
                            <a href="###" class="btn-share btn-share-weibo"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="footer-container">
        <div class="container">
            <div class="row">
                <div class="col-md-10">
                    <ul>
                        <li class="footer-item">
                            <a href="###" class="footer-link">服務條款</a>
                        </li>
                        <li class="footer-item">
                            <a href="###" class="footer-link">重要聲明</a>
                        </li>
                        <li class="footer-item">
                            <a href="###" class="footer-link">隱私政策</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <a href="###" class="footer-link">中國/中文 &gt;</a>
                </div>
            </div>
            <div>
                <p>此網頁最好使用IE10瀏覽器、Chrome瀏覽器、Safari瀏覽器或其餘新式瀏覽器進行瀏覽</p>
                <p>京ICP備xxxxxxxx號 京公網安備1101xxxxxxxx號</p>
            </div>
        </div>
    </div>

    <script>
        var nav = document.getElementById('nav'); var navExtendedClassName = 'nav-container-extended'; // 移動端點擊下拉按鈕，展開頂部導航
 document.getElementById('btn-toggle').onclick = function() { // nav.className += ' ' + navExtendedClassName;
            if (nav.classList.contains(navExtendedClassName)) { // 收起
 nav.classList.remove(navExtendedClassName); } else { // 展開
 nav.classList.add(navExtendedClassName); } }; </script>
</body>
</html>

base.css性能

* { box-sizing: border-box; padding: 0; margin: 0;
} body { font-size: 14px;
} li { list-style: none;
} a { font-size: 14px; color: #363636; text-decoration: none;
} a:hover { color: #1428a0;
} img { vertical-align: top; width: 100%; border: none;
}

grid.css測試

.container { width: 100%; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto;
}

/*sm*/ @media (min-width: 576px) { .container { width: 540px;
    } } /*md*/ @media (min-width: 768px) { .container { width: 720px;
    } } /*lg*/ @media (min-width: 992px) { .container { width: 960px;
    } } /*xl*/ @media (min-width: 1200px) { .container { width: 1140px;
    } } .row { margin-left: -15px; margin-right: -15px;
} .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { position: relative; padding-left: 15px; padding-right: 15px;
} .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { float: left;
} .col-1 { width: 8.33333333%;
} .col-2 { width: 16.66666667%;
} .col-3 { width: 25%;
} .col-4 { width: 33.33333333%;
} .col-5 { width: 41.66666667%;
} .col-6 { width: 50%;
} .col-7 { width: 58.33333333%;
} .col-8 { width: 66.66666667%;
} .col-9 { width: 75%;
} .col-10 { width: 83.33333333%;
} .col-11 { width: 91.66666667%;
} .col-12 { width: 100%;
} .col-offset-12 { margin-left: 100%;
} .col-offset-11 { margin-left: 91.66666667%;
} .col-offset-10 { margin-left: 83.33333333%;
} .col-offset-9 { margin-left: 75%;
} .col-offset-8 { margin-left: 66.66666667%;
} .col-offset-7 { margin-left: 58.33333333%;
} .col-offset-6 { margin-left: 50%;
} .col-offset-5 { margin-left: 41.66666667%;
} .col-offset-4 { margin-left: 33.33333333%;
} .col-offset-3 { margin-left: 25%;
} .col-offset-2 { margin-left: 16.66666667%;
} .col-offset-1 { margin-left: 8.33333333%;
} .col-offset-0 { margin-left: 0;
} .col-pull-12 { right: 100%;
} .col-pull-11 { right: 91.66666667%;
} .col-pull-10 { right: 83.33333333%;
} .col-pull-9 { right: 75%;
} .col-pull-8 { right: 66.66666667%;
} .col-pull-7 { right: 58.33333333%;
} .col-pull-6 { right: 50%;
} .col-pull-5 { right: 41.66666667%;
} .col-pull-4 { right: 33.33333333%;
} .col-pull-3 { right: 25%;
} .col-pull-2 { right: 16.66666667%;
} .col-pull-1 { right: 8.33333333%;
} .col-pull-0 { right: auto;
} .col-push-12 { left: 100%;
} .col-push-11 { left: 91.66666667%;
} .col-push-10 { left: 83.33333333%;
} .col-push-9 { left: 75%;
} .col-push-8 { left: 66.66666667%;
} .col-push-7 { left: 58.33333333%;
} .col-push-6 { left: 50%;
} .col-push-5 { left: 41.66666667%;
} .col-push-4 { left: 33.33333333%;
} .col-push-3 { left: 25%;
} .col-push-2 { left: 16.66666667%;
} .col-push-1 { left: 8.33333333%;
} .col-push-0 { left: auto;
}

/*sm*/ @media (min-width: 576px) { .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left;
    } .col-sm-1 { width: 8.33333333%;
    } .col-sm-2 { width: 16.66666667%;
    } .col-sm-3 { width: 25%;
    } .col-sm-4 { width: 33.33333333%;
    } .col-sm-5 { width: 41.66666667%;
    } .col-sm-6 { width: 50%;
    } .col-sm-7 { width: 58.33333333%;
    } .col-sm-8 { width: 66.66666667%;
    } .col-sm-9 { width: 75%;
    } .col-sm-10 { width: 83.33333333%;
    } .col-sm-11 { width: 91.66666667%;
    } .col-sm-12 { width: 100%;
    } .col-sm-offset-12 { margin-left: 100%;
    } .col-sm-offset-11 { margin-left: 91.66666667%;
    } .col-sm-offset-10 { margin-left: 83.33333333%;
    } .col-sm-offset-9 { margin-left: 75%;
    } .col-sm-offset-8 { margin-left: 66.66666667%;
    } .col-sm-offset-7 { margin-left: 58.33333333%;
    } .col-sm-offset-6 { margin-left: 50%;
    } .col-sm-offset-5 { margin-left: 41.66666667%;
    } .col-sm-offset-4 { margin-left: 33.33333333%;
    } .col-sm-offset-3 { margin-left: 25%;
    } .col-sm-offset-2 { margin-left: 16.66666667%;
    } .col-sm-offset-1 { margin-left: 8.33333333%;
    } .col-sm-offset-0 { margin-left: 0;
    } .col-sm-pull-12 { right: 100%;
    } .col-sm-pull-11 { right: 91.66666667%;
    } .col-sm-pull-10 { right: 83.33333333%;
    } .col-sm-pull-9 { right: 75%;
    } .col-sm-pull-8 { right: 66.66666667%;
    } .col-sm-pull-7 { right: 58.33333333%;
    } .col-sm-pull-6 { right: 50%;
    } .col-sm-pull-5 { right: 41.66666667%;
    } .col-sm-pull-4 { right: 33.33333333%;
    } .col-sm-pull-3 { right: 25%;
    } .col-sm-pull-2 { right: 16.66666667%;
    } .col-sm-pull-1 { right: 8.33333333%;
    } .col-sm-pull-0 { right: auto;
    } .col-sm-push-12 { left: 100%;
    } .col-sm-push-11 { left: 91.66666667%;
    } .col-sm-push-10 { left: 83.33333333%;
    } .col-sm-push-9 { left: 75%;
    } .col-sm-push-8 { left: 66.66666667%;
    } .col-sm-push-7 { left: 58.33333333%;
    } .col-sm-push-6 { left: 50%;
    } .col-sm-push-5 { left: 41.66666667%;
    } .col-sm-push-4 { left: 33.33333333%;
    } .col-sm-push-3 { left: 25%;
    } .col-sm-push-2 { left: 16.66666667%;
    } .col-sm-push-1 { left: 8.33333333%;
    } .col-sm-push-0 { left: auto;
    } } /*md*/ @media (min-width: 768px) { .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left;
    } .col-md-1 { width: 8.33333333%;
    } .col-md-2 { width: 16.66666667%;
    } .col-md-3 { width: 25%;
    } .col-md-4 { width: 33.33333333%;
    } .col-md-5 { width: 41.66666667%;
    } .col-md-6 { width: 50%;
    } .col-md-7 { width: 58.33333333%;
    } .col-md-8 { width: 66.66666667%;
    } .col-md-9 { width: 75%;
    } .col-md-10 { width: 83.33333333%;
    } .col-md-11 { width: 91.66666667%;
    } .col-md-12 { width: 100%;
    } .col-md-offset-12 { margin-left: 100%;
    } .col-md-offset-11 { margin-left: 91.66666667%;
    } .col-md-offset-10 { margin-left: 83.33333333%;
    } .col-md-offset-9 { margin-left: 75%;
    } .col-md-offset-8 { margin-left: 66.66666667%;
    } .col-md-offset-7 { margin-left: 58.33333333%;
    } .col-md-offset-6 { margin-left: 50%;
    } .col-md-offset-5 { margin-left: 41.66666667%;
    } .col-md-offset-4 { margin-left: 33.33333333%;
    } .col-md-offset-3 { margin-left: 25%;
    } .col-md-offset-2 { margin-left: 16.66666667%;
    } .col-md-offset-1 { margin-left: 8.33333333%;
    } .col-md-offset-0 { margin-left: 0;
    } .col-md-pull-12 { right: 100%;
    } .col-md-pull-11 { right: 91.66666667%;
    } .col-md-pull-10 { right: 83.33333333%;
    } .col-md-pull-9 { right: 75%;
    } .col-md-pull-8 { right: 66.66666667%;
    } .col-md-pull-7 { right: 58.33333333%;
    } .col-md-pull-6 { right: 50%;
    } .col-md-pull-5 { right: 41.66666667%;
    } .col-md-pull-4 { right: 33.33333333%;
    } .col-md-pull-3 { right: 25%;
    } .col-md-pull-2 { right: 16.66666667%;
    } .col-md-pull-1 { right: 8.33333333%;
    } .col-md-pull-0 { right: auto;
    } .col-md-push-12 { left: 100%;
    } .col-md-push-11 { left: 91.66666667%;
    } .col-md-push-10 { left: 83.33333333%;
    } .col-md-push-9 { left: 75%;
    } .col-md-push-8 { left: 66.66666667%;
    } .col-md-push-7 { left: 58.33333333%;
    } .col-md-push-6 { left: 50%;
    } .col-md-push-5 { left: 41.66666667%;
    } .col-md-push-4 { left: 33.33333333%;
    } .col-md-push-3 { left: 25%;
    } .col-md-push-2 { left: 16.66666667%;
    } .col-md-push-1 { left: 8.33333333%;
    } .col-md-push-0 { left: auto;
    } } /*lg*/ @media (min-width: 992px) { .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left;
    } .col-lg-1 { width: 8.33333333%;
    } .col-lg-2 { width: 16.66666667%;
    } .col-lg-3 { width: 25%;
    } .col-lg-4 { width: 33.33333333%;
    } .col-lg-5 { width: 41.66666667%;
    } .col-lg-6 { width: 50%;
    } .col-lg-7 { width: 58.33333333%;
    } .col-lg-8 { width: 66.66666667%;
    } .col-lg-9 { width: 75%;
    } .col-lg-10 { width: 83.33333333%;
    } .col-lg-11 { width: 91.66666667%;
    } .col-lg-12 { width: 100%;
    } .col-lg-offset-12 { margin-left: 100%;
    } .col-lg-offset-11 { margin-left: 91.66666667%;
    } .col-lg-offset-10 { margin-left: 83.33333333%;
    } .col-lg-offset-9 { margin-left: 75%;
    } .col-lg-offset-8 { margin-left: 66.66666667%;
    } .col-lg-offset-7 { margin-left: 58.33333333%;
    } .col-lg-offset-6 { margin-left: 50%;
    } .col-lg-offset-5 { margin-left: 41.66666667%;
    } .col-lg-offset-4 { margin-left: 33.33333333%;
    } .col-lg-offset-3 { margin-left: 25%;
    } .col-lg-offset-2 { margin-left: 16.66666667%;
    } .col-lg-offset-1 { margin-left: 8.33333333%;
    } .col-lg-offset-0 { margin-left: 0;
    } .col-lg-pull-12 { right: 100%;
    } .col-lg-pull-11 { right: 91.66666667%;
    } .col-lg-pull-10 { right: 83.33333333%;
    } .col-lg-pull-9 { right: 75%;
    } .col-lg-pull-8 { right: 66.66666667%;
    } .col-lg-pull-7 { right: 58.33333333%;
    } .col-lg-pull-6 { right: 50%;
    } .col-lg-pull-5 { right: 41.66666667%;
    } .col-lg-pull-4 { right: 33.33333333%;
    } .col-lg-pull-3 { right: 25%;
    } .col-lg-pull-2 { right: 16.66666667%;
    } .col-lg-pull-1 { right: 8.33333333%;
    } .col-lg-pull-0 { right: auto;
    } .col-lg-push-12 { left: 100%;
    } .col-lg-push-11 { left: 91.66666667%;
    } .col-lg-push-10 { left: 83.33333333%;
    } .col-lg-push-9 { left: 75%;
    } .col-lg-push-8 { left: 66.66666667%;
    } .col-lg-push-7 { left: 58.33333333%;
    } .col-lg-push-6 { left: 50%;
    } .col-lg-push-5 { left: 41.66666667%;
    } .col-lg-push-4 { left: 33.33333333%;
    } .col-lg-push-3 { left: 25%;
    } .col-lg-push-2 { left: 16.66666667%;
    } .col-lg-push-1 { left: 8.33333333%;
    } .col-lg-push-0 { left: auto;
    } } /*xl*/ @media (min-width: 1200px) { .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { float: left;
    } .col-xl-1 { width: 8.33333333%;
    } .col-xl-2 { width: 16.66666667%;
    } .col-xl-3 { width: 25%;
    } .col-xl-4 { width: 33.33333333%;
    } .col-xl-5 { width: 41.66666667%;
    } .col-xl-6 { width: 50%;
    } .col-xl-7 { width: 58.33333333%;
    } .col-xl-8 { width: 66.66666667%;
    } .col-xl-9 { width: 75%;
    } .col-xl-10 { width: 83.33333333%;
    } .col-xl-11 { width: 91.66666667%;
    } .col-xl-12 { width: 100%;
    } .col-xl-offset-12 { margin-left: 100%;
    } .col-xl-offset-11 { margin-left: 91.66666667%;
    } .col-xl-offset-10 { margin-left: 83.33333333%;
    } .col-xl-offset-9 { margin-left: 75%;
    } .col-xl-offset-8 { margin-left: 66.66666667%;
    } .col-xl-offset-7 { margin-left: 58.33333333%;
    } .col-xl-offset-6 { margin-left: 50%;
    } .col-xl-offset-5 { margin-left: 41.66666667%;
    } .col-xl-offset-4 { margin-left: 33.33333333%;
    } .col-xl-offset-3 { margin-left: 25%;
    } .col-xl-offset-2 { margin-left: 16.66666667%;
    } .col-xl-offset-1 { margin-left: 8.33333333%;
    } .col-xl-offset-0 { margin-left: 0;
    } .col-xl-pull-12 { right: 100%;
    } .col-xl-pull-11 { right: 91.66666667%;
    } .col-xl-pull-10 { right: 83.33333333%;
    } .col-xl-pull-9 { right: 75%;
    } .col-xl-pull-8 { right: 66.66666667%;
    } .col-xl-pull-7 { right: 58.33333333%;
    } .col-xl-pull-6 { right: 50%;
    } .col-xl-pull-5 { right: 41.66666667%;
    } .col-xl-pull-4 { right: 33.33333333%;
    } .col-xl-pull-3 { right: 25%;
    } .col-xl-pull-2 { right: 16.66666667%;
    } .col-xl-pull-1 { right: 8.33333333%;
    } .col-xl-pull-0 { right: auto;
    } .col-xl-push-12 { left: 100%;
    } .col-xl-push-11 { left: 91.66666667%;
    } .col-xl-push-10 { left: 83.33333333%;
    } .col-xl-push-9 { left: 75%;
    } .col-xl-push-8 { left: 66.66666667%;
    } .col-xl-push-7 { left: 58.33333333%;
    } .col-xl-push-6 { left: 50%;
    } .col-xl-push-5 { left: 41.66666667%;
    } .col-xl-push-4 { left: 33.33333333%;
    } .col-xl-push-3 { left: 25%;
    } .col-xl-push-2 { left: 16.66666667%;
    } .col-xl-push-1 { left: 8.33333333%;
    } .col-xl-push-0 { left: auto;
    } } .d-none { display: none !important;
} .d-block { display: block !important;
}

/*sm*/ @media (min-width: 576px) { .d-sm-none { display: none !important;
    } .d-sm-block { display: block !important;
    } } /*md*/ @media (min-width: 768px) { .d-md-none { display: none !important;
    } .d-md-block { display: block !important;
    } } /*lg*/ @media (min-width: 992px) { .d-lg-none { display: none !important;
    } .d-lg-block { display: block !important;
    } } /*xl*/ @media (min-width: 1200px) { .d-xl-none { display: none !important;
    } .d-xl-block { display: block !important;
    } } .clearfix:after, .clearfix:before, .container:after, .container:before, .row:after, .row:before { display: table; content: ' ';
} .clearfix:after, .container:after, .row:after { clear: both;
}

index.cssflex

/*-- 佈局 start --*/

/*header*/ .header-container { background-color: #fff; border-bottom: 1px solid #dadada;
} .header-logo-container, .header-btn-container, .header-nav-container { height: 64px;
} .header-btn-container { display: flex; justify-content: flex-end; align-items: center;
}

/*nav*/ .nav-container { overflow: hidden; position: relative; top: -1px; height: 0; border-bottom: 1px solid #dadada; transition: height 0.5s;
} .nav-container-extended { top: 0; height: 201px;
}

/*slider*/ .slider-container { margin-top: 20px; margin-bottom: 20px;
} .slider-container .row { background-color: #f5f5f5; margin-left: 0; margin-right: 0;
} @media (min-width: 768px) { .slider-container .row { display: flex; align-items: center;
    } } .slider-text-container { padding: 20px 0;
}

/*product*/ .product-container { margin-bottom: 20px;
}

/*backtop*/ .backtop-container { background-color: #fff; border-top: 1px solid #dadada; border-bottom: 1px solid #dadada;
}

/*helper*/ .helper-container { padding-top: 20px; padding-bottom: 10px; background-color: #f7f7f7; font-size: 12px; line-height: 2;
} .helper-info-container { margin-bottom: 20px; line-height: 1.6;
} .helper-backtop-container { margin-bottom: 10px;
}

/*footer*/ .footer-container { padding: 15px 0; background-color: #363636; color: #a6a6a6; font-size: 12px; line-height: 2;
}

/*-- 佈局 end --*/


/*-- 組件 start --*/

/*btn-toggle*/ .btn-toggle { padding: 10px; background-color: transparent; border: none; border-radius: 4px; cursor: pointer;
} .btn-toggle:hover { background-color: #f9f9f9;
} .btn-toggle:hover .btn-toggle-bar { background-color: #1428a0;
} .btn-toggle-bar { display: block; width: 24px; height: 4px; background-color: #363636; border-radius: 2px;
} .btn-toggle-bar + .btn-toggle-bar { margin-top: 4px;
}

/*btn-rounded*/ .btn-rounded { display: inline-block; padding: 10px 30px; background-color: transparent; border: 1px solid #000; border-radius: 30px; color: #000; font-size: 16px; font-weight: bold; transition: all 0.3s;
} .btn-rounded:hover { background-color: #000; color: #fff;
}

/*btn-backtop*/ .btn-backtop:after { content: ''; position: relative; top: -2px; left: 5px; display: inline-block; width: 10px; height: 6px; background-image: url(../img/up.svg);
} .btn-backtop:hover:after { background-image: url(../img/up-hover.svg);
}

/*btn-share*/ .btn-share { display: inline-block; width: 30px; height: 30px; background-size: 100% 100%;
} .btn-share-weixin { background-image: url(../img/weixin.svg);
} .btn-share-weixin:hover { background-image: url(../img/weixin-hover.svg);
} .btn-share-weibo { background-image: url(../img/weibo.svg);
} .btn-share-weibo:hover { background-image: url(../img/weibo-hover.svg);
}

/*-- 組件 end --*/


/*-- 內容 start --*/

/*header*/ .header-logo { display: flex; align-items: center; width: 136px; height: 100%;
} .header-nav, .header-nav-item, .header-nav-link { height: 100%;
} .header-nav { display: flex; justify-content: flex-end; font-size: 14px;
} .header-nav-item { margin-left: 24px;
} .header-nav-item:first-child { margin-left: 0;
} .header-nav-link { display: flex; align-items: center; font-weight: bold;
}

/*nav*/ .nav-link { display: block; height: 40px; line-height: 40px; font-weight: bold;
}

/*slider*/ .slider-title, .slider-subtitle, .slider-btns { margin-bottom: 20px; text-align: center;
} .slider-title { font-size: 30px;
} .slider-subtitle { font-size: 20px; font-weight: normal;
} .slider-btns .btn-rounded { margin-right: 10px; margin-bottom: 10px;
} .slider-btns .btn-rounded:last-child { margin-right: 0;
}

/*product*/ .product-item { overflow: hidden; display: block;
} .product-img { transition: transform 1s;
} .product-img:hover { transform: scale(1.2);
}

/*backtop*/ .backtop-container .btn-backtop { display: block; padding: 18px 0; text-align: center;
}

/*helper*/ .helper-list-title { font-size: 16px;
} .helper-list { margin-bottom: 10px;
} .helper-list .btn-share { margin-top: 10px; margin-right: 12px;
} .helper-list .btn-share:last-child { margin-right: 0;
}

/*footer*/ .footer-item { display: inline-block; margin-right: 20px;
} .footer-item:last-child { margin-right: 0;
} .footer-link { color: #fff; font-size: 14px; font-weight: bold;
} .footer-link:hover { color: #fff; text-decoration: underline;
}

/*-- 內容 end --*/

方案2：用flex佈局實現柵格系統網站

index-flex.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>響應式佈局--flex</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/grid-flex.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <header class="header-container">
        <div class="container">
            <div class="row">
                <div class="header-logo-container col-8 col-md-3">
                    <a href="./index.html" class="header-logo">
                        <img src="img/logo.svg" alt="logo">
                    </a>
                </div>
                <div class="header-btn-container col-4 d-md-none">
                    <button type="button" class="btn-toggle" id="btn-toggle">
                        <span class="btn-toggle-bar"></span>
                        <span class="btn-toggle-bar"></span>
                        <span class="btn-toggle-bar"></span>
                    </button>
                </div>
                <nav class="header-nav-container col-md-9 d-none d-md-block">
                    <ul class="header-nav">
                        <li class="header-nav-item">
                            <a href="###" class="header-nav-link">手機&amp;平板</a>
                        </li>
                        <li class="header-nav-item">
                            <a href="###" class="header-nav-link">電視&amp;影音</a>
                        </li>
                        <li class="header-nav-item">
                            <a href="###" class="header-nav-link">生活家電</a>
                        </li>
                        <li class="header-nav-item">
                            <a href="###" class="header-nav-link">電腦/辦公/存儲</a>
                        </li>
                        <li class="header-nav-item">
                            <a href="###" class="header-nav-link">網上商城</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>

    <nav class="nav-container d-md-none" id="nav">
        <ul class="container">
            <li><a href="###" class="nav-link">手機&amp;平板</a></li>
            <li><a href="###" class="nav-link">電視&amp;影音</a></li>
            <li><a href="###" class="nav-link">生活家電</a></li>
            <li><a href="###" class="nav-link">電腦/辦公/存儲</a></li>
            <li><a href="###" class="nav-link">網上商城</a></li>
        </ul>
    </nav>

    <div class="slider-container">
        <div class="container">
            <div class="row">
                <div class="slider-text-container col-md-5 col-md-order-last">
                    <h3 class="slider-title">Galaxy S9｜S9+</h3>
                    <h4 class="slider-subtitle">冰藍 煥新上市</h4>
                    <div class="slider-btns">
                        <a href="###" class="btn-rounded">瞭解更多</a>
                        <a href="###" class="btn-rounded">當即購買</a>
                    </div>
                </div>
                <div class="col-md-7 col-md-order-first">
                    <img src="img/1.png" alt="cellphone">
                </div>
            </div>
        </div>
    </div>

    <div class="product-container">
        <div class="container">
            <div class="row">
                <div class="col-md">
                    <a href="###" class="product-item">
                        <img src="img/2-1.jpg" alt="cellphone" class="product-img">
                    </a>
                </div>
                <div class="col-md">
                    <a href="###" class="product-item">
                        <img src="img/2-2.jpg" alt="cellphone" class="product-img">
                    </a>
                </div>
                <div class="col-md">
                    <a href="###" class="product-item">
                        <img src="img/2-3.jpg" alt="cellphone" class="product-img">
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="backtop-container d-md-none">
        <a href="#" class="btn-backtop">回到頂部</a>
    </div>

    <div class="helper-container">
        <div class="container">
            <div class="helper-info-container">
                <p>* Galaxy A9s具有後置四攝功能，Galaxy A6s爲後置雙攝產品。</p>
                <p>* Galaxy S9 | S9+廣告中手機背面圖是Galaxy S9+，Galaxy S9爲背面單攝像頭產品。</p>
                <p>* 本網站的產品圖片以及型號、數據、功能、性能、規格參數等僅供參考，三星有可能對上述內容進行改進，具體信息請參照產品實物、產品說明書。</p>
                <p>* 除非經特殊說明，本網站中所涉及的數據均爲三星內部測試結果，涉及的對比均爲與三星產品相比較。</p>
            </div>
            <div class="row">
                <div class="helper-backtop-container col-md-2 col-md-offset-10 d-none d-md-block">
                    <a href="#" class="btn-backtop">回到頂部</a>
                </div>
            </div>
            <div class="row">
                <div class="col-6 col-md">
                    <h3 class="helper-list-title">網站地圖</h3>
                    <ul class="helper-list">
                        <li><a href="###">關於三星</a></li>
                        <li><a href="###">投資者關係</a></li>
                        <li><a href="###">新聞中心</a></li>
                        <li><a href="###">人才招聘</a></li>
                        <li><a href="###">三星開發者網站</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h3 class="helper-list-title">三星商店</h3>
                    <ul class="helper-list">
                        <li><a href="###">網上商城</a></li>
                        <li><a href="###">最新活動</a></li>
                        <li><a href="###">受權體驗店</a></li>
                        <li><a href="###">全產品專賣店</a></li>
                        <li><a href="###">三星視頻空間</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h3 class="helper-list-title">服務支持</h3>
                    <ul class="helper-list">
                        <li><a href="###">在線服務</a></li>
                        <li><a href="###">郵件諮詢</a></li>
                        <li><a href="###">聯繫咱們</a></li>
                        <li><a href="###">服務中心查詢</a></li>
                        <li><a href="###">三星專賣店招募</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h3 class="helper-list-title">官方分享</h3>
                    <ul class="helper-list">
                        <li>
                            <a href="###" class="btn-share btn-share-weixin"></a>
                            <a href="###" class="btn-share btn-share-weibo"></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="footer-container">
        <div class="container">
            <div class="row">
                <div class="col-md-10">
                    <ul>
                        <li class="footer-item">
                            <a href="###" class="footer-link">服務條款</a>
                        </li>
                        <li class="footer-item">
                            <a href="###" class="footer-link">重要聲明</a>
                        </li>
                        <li class="footer-item">
                            <a href="###" class="footer-link">隱私政策</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <a href="###" class="footer-link">中國/中文 &gt;</a>
                </div>
            </div>
            <div>
                <p>此網頁最好使用IE10瀏覽器、Chrome瀏覽器、Safari瀏覽器或其餘新式瀏覽器進行瀏覽</p>
                <p>京ICP備05068163號 京公網安備110105011756號</p>
            </div>
        </div>
    </div>

    <script>
        var nav = document.getElementById('nav'); var navExtendedClassName = 'nav-container-extended'; document.getElementById('btn-toggle').onclick = function() { // nav.className += ' ' + navExtendedClassName;
            if (nav.classList.contains(navExtendedClassName)) { // 收起
 nav.classList.remove(navExtendedClassName); } else { // 展開
 nav.classList.add(navExtendedClassName); } }; </script>
</body>
</html>

grid-flex.css

.container { width: 100%; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto;
}

/*sm*/ @media (min-width: 576px) { .container { width: 540px;
    } } /*md*/ @media (min-width: 768px) { .container { width: 720px;
    } } /*lg*/ @media (min-width: 992px) { .container { width: 960px;
    } } /*xl*/ @media (min-width: 1200px) { .container { width: 1140px;
    } } .row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px;
} .col, .col-sm, .col-md, .col-lg, .clo-xl, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { width: 100%; padding-left: 15px; padding-right: 15px;
} .col { flex-basis: 0; flex-grow: 1;
} .col-1 { flex: 0 0 8.33333333%;
} .col-2 { flex: 0 0 16.66666667%;
} .col-3 { flex: 0 0 25%;
} .col-4 { flex: 0 0 33.33333333%;
} .col-5 { flex: 0 0 41.66666667%;
} .col-6 { flex: 0 0 50%;
} .col-7 { flex: 0 0 58.33333333%;
} .col-8 { flex: 0 0 66.66666667%;
} .col-9 { flex: 0 0 75%;
} .col-10 { flex: 0 0 83.33333333%;
} .col-11 { flex: 0 0 91.66666667%;
} .col-12 { flex: 0 0 100%;
} .col-offset-12 { margin-left: 100%;
} .col-offset-11 { margin-left: 91.66666667%;
} .col-offset-10 { margin-left: 83.33333333%;
} .col-offset-9 { margin-left: 75%;
} .col-offset-8 { margin-left: 66.66666667%;
} .col-offset-7 { margin-left: 58.33333333%;
} .col-offset-6 { margin-left: 50%;
} .col-offset-5 { margin-left: 41.66666667%;
} .col-offset-4 { margin-left: 33.33333333%;
} .col-offset-3 { margin-left: 25%;
} .col-offset-2 { margin-left: 16.66666667%;
} .col-offset-1 { margin-left: 8.33333333%;
} .col-offset-0 { margin-left: 0;
} .col-order-first { order: -1;
} .col-order-last { order: 13;
} .col-order-0 { order: 0;
} .col-order-1 { order: 1;
} .col-order-2 { order: 2;
} .col-order-3 { order: 3;
} .col-order-4 { order: 4;
} .col-order-5 { order: 5;
} .col-order-6 { order: 6;
} .col-order-7 { order: 7;
} .col-order-8 { order: 8;
} .col-order-9 { order: 9;
} .col-order-10 { order: 10;
} .col-order-11 { order: 11;
} .col-order-12 { order: 12;
}

/*sm*/ @media (min-width: 576px) { .col-sm { flex-basis: 0; flex-grow: 1;
    } .col-sm-1 { flex: 0 0 8.33333333%;
    } .col-sm-2 { flex: 0 0 16.66666667%;
    } .col-sm-3 { flex: 0 0 25%;
    } .col-sm-4 { flex: 0 0 33.33333333%;
    } .col-sm-5 { flex: 0 0 41.66666667%;
    } .col-sm-6 { flex: 0 0 50%;
    } .col-sm-7 { flex: 0 0 58.33333333%;
    } .col-sm-8 { flex: 0 0 66.66666667%;
    } .col-sm-9 { flex: 0 0 75%;
    } .col-sm-10 { flex: 0 0 83.33333333%;
    } .col-sm-11 { flex: 0 0 91.66666667%;
    } .col-sm-12 { flex: 0 0 100%;
    } .col-sm-offset-12 { margin-left: 100%;
    } .col-sm-offset-11 { margin-left: 91.66666667%;
    } .col-sm-offset-10 { margin-left: 83.33333333%;
    } .col-sm-offset-9 { margin-left: 75%;
    } .col-sm-offset-8 { margin-left: 66.66666667%;
    } .col-sm-offset-7 { margin-left: 58.33333333%;
    } .col-sm-offset-6 { margin-left: 50%;
    } .col-sm-offset-5 { margin-left: 41.66666667%;
    } .col-sm-offset-4 { margin-left: 33.33333333%;
    } .col-sm-offset-3 { margin-left: 25%;
    } .col-sm-offset-2 { margin-left: 16.66666667%;
    } .col-sm-offset-1 { margin-left: 8.33333333%;
    } .col-sm-offset-0 { margin-left: 0;
    } .col-sm-order-first { order: -1;
    } .col-sm-order-last { order: 13;
    } .col-sm-order-0 { order: 0;
    } .col-sm-order-1 { order: 1;
    } .col-sm-order-2 { order: 2;
    } .col-sm-order-3 { order: 3;
    } .col-sm-order-4 { order: 4;
    } .col-sm-order-5 { order: 5;
    } .col-sm-order-6 { order: 6;
    } .col-sm-order-7 { order: 7;
    } .col-sm-order-8 { order: 8;
    } .col-sm-order-9 { order: 9;
    } .col-sm-order-10 { order: 10;
    } .col-sm-order-11 { order: 11;
    } .col-sm-order-12 { order: 12;
    } } /*md*/ @media (min-width: 768px) { .col-md { flex-basis: 0; flex-grow: 1;
    } .col-md-1 { flex: 0 0 8.33333333%;
    } .col-md-2 { flex: 0 0 16.66666667%;
    } .col-md-3 { flex: 0 0 25%;
    } .col-md-4 { flex: 0 0 33.33333333%;
    } .col-md-5 { flex: 0 0 41.66666667%;
    } .col-md-6 { flex: 0 0 50%;
    } .col-md-7 { flex: 0 0 58.33333333%;
    } .col-md-8 { flex: 0 0 66.66666667%;
    } .col-md-9 { flex: 0 0 75%;
    } .col-md-10 { flex: 0 0 83.33333333%;
    } .col-md-11 { flex: 0 0 91.66666667%;
    } .col-md-12 { flex: 0 0 100%;
    } .col-md-offset-12 { margin-left: 100%;
    } .col-md-offset-11 { margin-left: 91.66666667%;
    } .col-md-offset-10 { margin-left: 83.33333333%;
    } .col-md-offset-9 { margin-left: 75%;
    } .col-md-offset-8 { margin-left: 66.66666667%;
    } .col-md-offset-7 { margin-left: 58.33333333%;
    } .col-md-offset-6 { margin-left: 50%;
    } .col-md-offset-5 { margin-left: 41.66666667%;
    } .col-md-offset-4 { margin-left: 33.33333333%;
    } .col-md-offset-3 { margin-left: 25%;
    } .col-md-offset-2 { margin-left: 16.66666667%;
    } .col-md-offset-1 { margin-left: 8.33333333%;
    } .col-md-offset-0 { margin-left: 0;
    } .col-md-order-first { order: -1;
    } .col-md-order-last { order: 13;
    } .col-md-order-0 { order: 0;
    } .col-md-order-1 { order: 1;
    } .col-md-order-2 { order: 2;
    } .col-md-order-3 { order: 3;
    } .col-md-order-4 { order: 4;
    } .col-md-order-5 { order: 5;
    } .col-md-order-6 { order: 6;
    } .col-md-order-7 { order: 7;
    } .col-md-order-8 { order: 8;
    } .col-md-order-9 { order: 9;
    } .col-md-order-10 { order: 10;
    } .col-md-order-11 { order: 11;
    } .col-md-order-12 { order: 12;
    } } /*lg*/ @media (min-width: 992px) { .col-lg { flex-basis: 0; flex-grow: 1;
    } .col-lg-1 { flex: 0 0 8.33333333%;
    } .col-lg-2 { flex: 0 0 16.66666667%;
    } .col-lg-3 { flex: 0 0 25%;
    } .col-lg-4 { flex: 0 0 33.33333333%;
    } .col-lg-5 { flex: 0 0 41.66666667%;
    } .col-lg-6 { flex: 0 0 50%;
    } .col-lg-7 { flex: 0 0 58.33333333%;
    } .col-lg-8 { flex: 0 0 66.66666667%;
    } .col-lg-9 { flex: 0 0 75%;
    } .col-lg-10 { flex: 0 0 83.33333333%;
    } .col-lg-11 { flex: 0 0 91.66666667%;
    } .col-lg-12 { flex: 0 0 100%;
    } .col-lg-offset-12 { margin-left: 100%;
    } .col-lg-offset-11 { margin-left: 91.66666667%;
    } .col-lg-offset-10 { margin-left: 83.33333333%;
    } .col-lg-offset-9 { margin-left: 75%;
    } .col-lg-offset-8 { margin-left: 66.66666667%;
    } .col-lg-offset-7 { margin-left: 58.33333333%;
    } .col-lg-offset-6 { margin-left: 50%;
    } .col-lg-offset-5 { margin-left: 41.66666667%;
    } .col-lg-offset-4 { margin-left: 33.33333333%;
    } .col-lg-offset-3 { margin-left: 25%;
    } .col-lg-offset-2 { margin-left: 16.66666667%;
    } .col-lg-offset-1 { margin-left: 8.33333333%;
    } .col-lg-offset-0 { margin-left: 0;
    } .col-lg-order-first { order: -1;
    } .col-lg-order-last { order: 13;
    } .col-lg-order-0 { order: 0;
    } .col-lg-order-1 { order: 1;
    } .col-lg-order-2 { order: 2;
    } .col-lg-order-3 { order: 3;
    } .col-lg-order-4 { order: 4;
    } .col-lg-order-5 { order: 5;
    } .col-lg-order-6 { order: 6;
    } .col-lg-order-7 { order: 7;
    } .col-lg-order-8 { order: 8;
    } .col-lg-order-9 { order: 9;
    } .col-lg-order-10 { order: 10;
    } .col-lg-order-11 { order: 11;
    } .col-lg-order-12 { order: 12;
    } } /*xl*/ @media (min-width: 1200px) { .col-xl { flex-basis: 0; flex-grow: 1;
    } .col-xl-1 { flex: 0 0 8.33333333%;
    } .col-xl-2 { flex: 0 0 16.66666667%;
    } .col-xl-3 { flex: 0 0 25%;
    } .col-xl-4 { flex: 0 0 33.33333333%;
    } .col-xl-5 { flex: 0 0 41.66666667%;
    } .col-xl-6 { flex: 0 0 50%;
    } .col-xl-7 { flex: 0 0 58.33333333%;
    } .col-xl-8 { flex: 0 0 66.66666667%;
    } .col-xl-9 { flex: 0 0 75%;
    } .col-xl-10 { flex: 0 0 83.33333333%;
    } .col-xl-11 { flex: 0 0 91.66666667%;
    } .col-xl-12 { flex: 0 0 100%;
    } .col-xl-offset-12 { margin-left: 100%;
    } .col-xl-offset-11 { margin-left: 91.66666667%;
    } .col-xl-offset-10 { margin-left: 83.33333333%;
    } .col-xl-offset-9 { margin-left: 75%;
    } .col-xl-offset-8 { margin-left: 66.66666667%;
    } .col-xl-offset-7 { margin-left: 58.33333333%;
    } .col-xl-offset-6 { margin-left: 50%;
    } .col-xl-offset-5 { margin-left: 41.66666667%;
    } .col-xl-offset-4 { margin-left: 33.33333333%;
    } .col-xl-offset-3 { margin-left: 25%;
    } .col-xl-offset-2 { margin-left: 16.66666667%;
    } .col-xl-offset-1 { margin-left: 8.33333333%;
    } .col-xl-offset-0 { margin-left: 0;
    } .col-xl-order-first { order: -1;
    } .col-xl-order-last { order: 13;
    } .col-xl-order-0 { order: 0;
    } .col-xl-order-1 { order: 1;
    } .col-xl-order-2 { order: 2;
    } .col-xl-order-3 { order: 3;
    } .col-xl-order-4 { order: 4;
    } .col-xl-order-5 { order: 5;
    } .col-xl-order-6 { order: 6;
    } .col-xl-order-7 { order: 7;
    } .col-xl-order-8 { order: 8;
    } .col-xl-order-9 { order: 9;
    } .col-xl-order-10 { order: 10;
    } .col-xl-order-11 { order: 11;
    } .col-xl-order-12 { order: 12;
    } } .d-none { display: none !important;
} .d-block { display: block !important;
}

/*sm*/ @media (min-width: 576px) { .d-sm-none { display: none !important;
    } .d-sm-block { display: block !important;
    } } /*md*/ @media (min-width: 768px) { .d-md-none { display: none !important;
    } .d-md-block { display: block !important;
    } } /*lg*/ @media (min-width: 992px) { .d-lg-none { display: none !important;
    } .d-lg-block { display: block !important;
    } } /*xl*/ @media (min-width: 1200px) { .d-xl-none { display: none !important;
    } .d-xl-block { display: block !important;
    } }