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

<!doctype html>
    <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">

        @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;

<body class="has-background-light Site">

<section class="hero is-primary">
    <div class="hero-body">
        <div class="container">
            <h1 class="title">
                Primary title
            <h2 class="subtitle">
                Primary subtitle

<section class="section Site-content">
    <div class="columns ordered-mobile">
        <div class="column is-2 fl-2">
            <div class="has-text-centered">
        <div class="column fl-1">
            <div class="box">

<footer class="footer">
    <div class="content has-text-centered">
            <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>.

<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>