我在預設解析度上使用「網格模板列」佈局，使元素按預期顯示，但在較小的解析度上，它們由容器優先級渲染，創建我想要更改的視覺效果。
在預設解析度下： 一個每個都在另一個之下。
1
640<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; } }