我想根据媒体分辨率安排3个元素。在桌面，我希望它们是
box1 box2
box3
和在移动端响应模式下(max-width: 800px)我希望它们是
box1
box2
box3
对于这个，我认为我需要在我的代码中有在通用部分
.box-container {
display: grid;
grid-template-columns: 60% 40%;
grid-auto-flow: column;
}
和
.box1 {
grid-row: 1 / 3;
background: lightblue;
}
使用 覆盖媒体查询部分中的来更改
@media only screen and (max-width: 800px) {
.box-container {
display: flex;
grid-template-columns: 100%;
flex-direction: column;
}
}
然而，不知何故，这并没有被覆盖，元素留在网格视图。当我把这段代码放在一般部分时，这些框会显示在彼此的下面。
https://codepen.io/tobwun/pen/MWQOpjL
谢谢你的帮助!
托比
只是颠倒你的.box-containerCSS规则的顺序。首先放置网格规则，然后在之后放置带有媒体查询的伸缩规则。它。
.box-container {
display: grid;
grid-template-columns: 60% 40%;
grid-auto-flow: column;
}
@media only screen and (max-width: 800px) {
.box-container {
display: flex;
flex-direction: column;
}
}
并且在将来，包含代码段在你的问题中-它是Stack Overflow的Codepen或jsFiddle版本。
.mydiv {
height: 45%;
background: #2f8466;
color: white;
}
.box-container {
display: grid;
grid-template-columns: 60% 40%;
grid-auto-flow: column;
}
@media only screen and (max-width: 800px) {
.box-container {
display: flex;
grid-template-columns: 100%;
flex-direction: column;
}
}
.box1 {
grid-row: 1 / 3;
background: lightblue;
}
.box2 {
background: lightgreen;
}
.box3 {
background: lightyellow;
}
<body>
<div class="main" id="main1">
Grid Layout Changes To Flex Layout
<div class="box-container">
<div class="box1">
Text1
</div>
<div class="box2">
Text2
</div>
<div class="box3">
Text3
</div>
</div>
</div>
</body>