Код из примера:
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Пробный документ</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css"> <style> @media screen and (max-width: 769px) { .ordered-mobile { display: flex; flex-flow: column; } .ordered-mobile .fl-1 { order: 1; } .ordered-mobile .fl-2 { order: 2; } .ordered-mobile .fl-3 { order: 3; } .ordered-mobile .fl-4 { order: 4; } } .Site { display: flex; min-height: 100vh; flex-direction: column; } .Site-content { flex: 1; } </style> </head> <body class="has-background-light Site"> <section class="hero is-primary"> <div class="hero-body"> <div class="container"> <h1 class="title"> Primary title </h1> <h2 class="subtitle"> Primary subtitle </h2> </div> </div> </section> <section class="section Site-content"> <div class="columns ordered-mobile"> <div class="column is-2 fl-2"> <div class="has-text-centered"> Sidebar </div> </div> <div class="column fl-1"> <div class="box"> Контент </div> </div> </div> </section> <footer class="footer"> <div class="content has-text-centered"> <p> <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>. </p> </div> </footer> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> </body> </html>
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти