Change columns stack order Bulma, so that middle column jumps down

Question

Seems like flex-direction: column-reverse; doesn't work for me, as the effect I want to achieve requires the middle column to jump down and the first and last column to share the tablet space equally. Also using the Bulma helpers like is-half-tablet doesn't bring the desired effect. Please find the image attached.

Answer 1

Here is a simple PEN where you can see the effect you want using grid:

HTML

<div class="container">
    <div class="one">1</div>
    <div class="two">2</div>
    <div class="three">3</div>
</div>

CSS

    .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(10, 65px);

    grid-gap: 10px;
   }

.one {
    background: aqua;
    padding: 10px;
    grid-column: 1/2;
    grid-row: 1/4;
}
.two {
    background: teal;
    padding: 10px;
}

.three {
    background: aqua;
    border: 2px solid aqua;
    grid-column: 3/4;
    grid-row: 1/4;
    padding: 10px;
}

@media screen and (max-width: 750px) {
    .two {
        grid-column: 1/2;
        grid-row: 4/5;
    }

    .three {
        grid-column: 2/3;
        grid-row: 1/4;
    }
}

@media screen and (max-width: 450px) {
    .two {
        grid-column: 1/2;
        grid-row: 4/6;
    }

    .three {
        grid-column: 1/2;
        grid-row: 6/10;
    }
}

Link to codepen: https://codepen.io/atelierDigital/pen/omeKjw?editors=1100

NOTE: Keep in mind that this change of order is only visual. People who use devices to read the content of your page for them still will navigate your page in the order of the HTML elements. That's this technique can raise concerns from an accessibility point of view.