Javascript CSS：根据屏幕大小重新定位列

对于我的web项目，我正在使用Bulma CSS创建一个响应迅速的web应用程序。我不是CSS方面的专家，因为我的背景对iOS和Android都很熟悉。因此，我试图实现以下布局：

1。桌面

所有列都应具有基于其内容的动态高度，但第3列的宽度应保持在视口的30%

2。移动电话

所有列都应具有动态高度，但唯一的区别是在第1列和第2列之间插入第3列。所有列宽应占视图端口的100%

到目前为止我所尝试的

.栏目{
高度：500px；
背景颜色：紫色；
边缘：2米；
颜色：白色；
字号：2em；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
1.
2.
3.

可能您应该使用网格和媒体查询：

style.css:

.columns {
    display: grid;
    grid-template-columns: 1fr 30%;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
                    "col1 col3" 
                    "col2 col3";
}
.column {
    width: 100%;
}
.column1 {
    grid-area: col1;
}
.column2 {
    grid-area: col2;
}
.column3 {
    grid-area: col3;
}
@media only screen and (max-width: 640px) {
    .columns {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: none;
    }
}

<div class="columns">
    <div class="column1 column">1</div>
    <div class="column2 column">2</div>
    <div class="column3 column">3</div>
</div>

index.html:

.columns {
    display: grid;
    grid-template-columns: 1fr 30%;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: 
                    "col1 col3" 
                    "col2 col3";
}
.column {
    width: 100%;
}
.column1 {
    grid-area: col1;
}
.column2 {
    grid-area: col2;
}
.column3 {
    grid-area: col3;
}
@media only screen and (max-width: 640px) {
    .columns {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: none;
    }
}

<div class="columns">
    <div class="column1 column">1</div>
    <div class="column2 column">2</div>
    <div class="column3 column">3</div>
</div>

1.
2.
3.

您可以在此处轻松找到有关网格的信息->

关于媒体查询->