更改列堆叠顺序布尔玛，使中间列向下跳

Question

好像flex-direction: column-reverse;对我不起作用，因为我想要达到的效果需要中间一栏往下跳，第一栏和最后一栏要平分平板空间。同样使用 is-half-tablet 之类的 Bulma 助手也不会带来预期的效果。请找到随附的图片。

Answer 1

这是一个简单的 PEN，您可以在其中使用网格查看您想要的效果：

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

codepen 链接：https://codepen.io/atelierDigital/pen/omeKjw?editors=1100

注意：请记住，这种顺序更改只是视觉上的。使用设备为他们阅读页面内容的人仍然会按照 HTML 元素的顺序浏览您的页面。从可访问性的角度来看，这种技术可能会引起关注。