Запустить
<!doctype html> <html lang="ru"> <head> <title>Пример адаптивного макета, построенного с использованием Bootstrap 4</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="/examples/vendors/bootstrap-4/css/bootstrap.min.css" rel="stylesheet"> <style> header, main, footer { text-align: center; font-size: 2rem; font-weight: 300; color: #fff; } .logo { background-color: #b2e7fa; } .top-nav { background-color: #1ab8f2; } .social { background-color: #66d0f6; } .hero { background-color: #b2e7ca; } .action { background-color: #66d096; } .left { background-color: #ffecb2; } .ad { background-color: #00b050; } .article { background-color: #ffc61a; min-height: 7rem; } .right { background-color: #ffd966; } .footer { background-color: #0070c0; } </style> </head> <body> <div class="container"> <h1 class="h4 text-center my-4">Пример адаптивного макета, построенного с использованием Bootstrap 4</h1> <div class="lead mb-2 text-center"> Текущая контрольная точка: <span class="d-inline d-sm-none">XS</span> <span class="d-none d-sm-inline d-md-none">SM</span> <span class="d-none d-md-inline d-lg-none">MD</span> <span class="d-none d-lg-inline d-xl-none">LG</span> <span class="d-none d-xl-inline">XL</span> </div> </div> <!-- HEADER --> <header class="header"> <div class="container-fluid"> <div class="row"> <div class="col-md-3 col-xl-2 logo">LOGO</div> <nav class="col-7 col-md-5 col-xl-7 top-nav">TOP-NAV</nav> <div class="col-5 col-md-4 col-xl-3 social">SOCIAL</div> </div> </div> </header> <!-- MAIN --> <main class="main"> <div class="container-fluid"> <div class="row"> <div class="col-xl-6 order-xl-1 hero">HERO</div> <div class="col-xl-3 order-xl-2 action">ACTION</div> <aside class="col-md-9 col-xl-3 order-xl-4 left">LEFT</aside> <div class="col-md-3 order-xl-3 ad">AD</div> <article class="col-xl-6 order-xl-5 article">ARTICLE</article> <aside class="col-xl-3 order-xl-6 right">RIGHT</aside> </div> </div> </main> <!-- FOOTER --> <footer class="footer"> <div class="container-fluid"> FOOTER </div> </footer> <!-- jQuery --> <script src="/examples/vendors/jquery/jquery-3.3.1.min.js"></script> <!-- Popper --> <script src="/examples/vendors/popper.js/popper.min.js"></script> <!-- Bootstrap JS --> <script src="/examples/vendors/bootstrap-4/js/bootstrap.min.js"></script> </body> </html>