我在默认分辨率上使用“网格模板列”布局，使元素按预期显示，但在较小的分辨率上，它们由容器优先级渲染，创建我想要更改的视觉效果。
在默认分辨率下： 位于其下方。在较小的分辨率上，我想让元素在此布局中呈现： 一个每个都在另一个之下。
<div className='container about_container'>
<div>
<div>
<img src={image} alt='Image'/>
</div>
<Selector/>
</div>
<div>
<Skills/>
<div>
<p>
blablabla
</p>
</div>
</div>
</div>
.container {
width: 75%;
margin: 0 auto;
}
.about_container {
display: grid;
grid-template-columns: 20% 75%;
gap: 5%;
}
@media screen and (max-width: 600px) {
.container {
grid-template-columns: 1fr;
gap: 0;
}
} 
考虑应用
显示：内容在窄断点处的列包装器上，以便它们的布局框被它们的子级替换，从而有效地使它们的子级成为网格布局的子级。这样我们就可以使用order对子元素重新排序，尽管它们位于不同的父元素中。.container { width: 75%; margin: 0 auto; } .about_container { display: grid; grid-template-columns: 20% 75%; gap: 5%; } @media screen and (max-width: 600px) { .container { grid-template-columns: 1fr; gap: 0; } .contents { display: contents; } Selector { order: 2; } Skills { order: 1; } .paragraph-wrapper { order: 3; } }<div class='container about_container'> <div class="contents"> <div> <img src="https://picsum.photos/48/48" alt='Image' /> </div> <Selector>Selector</Selector> </div> <div class="contents"> <Skills>Skills</Skills> <div class="paragraph-wrapper"> <p> blablabla </p> </div> </div> </div>