Верстка двух и трех колоночного макета сайта с прозрачными боковыми колонками. Задание.


Код из примера:

<!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>