能否通过MediaQueries调整小分辨率下Grid布局顺序且不改动默认布局？

默认分辨率下布局符合预期：<Selector>在页面左侧，<Skills>在页面右侧，<p>位于<Skills>下方。小分辨率（≤600px）需调整元素顺序为<Skills>、<Selector>、<p>垂直排列。

实现步骤 #

1. 调整HTML结构，拆分独立模块

将原来嵌套在同一容器中的<Skills>和<p>拆分为独立的Grid子项，方便分别控制布局位置：

<div className='container about_container'>
  {/* Selector 模块 */}
  <div className="selector-block">
    <div>
      <img src={image} alt='Image'/>
    </div>
    <Selector/>
  </div>

  {/* Skills 模块 */}
  <div className="skills-block">
   <Skills/>
  </div>

  {/* 文本模块 */}
  <div className="text-block"> 
    <p>
      blablabla
    </p>
  </div>
</div>

2. 修改CSS，使用Grid区域控制布局

通过grid-template-areas定义不同分辨率下的元素排列规则，同时保留原有布局逻辑：

.container {
    width: 75%;
    margin: 0 auto;
}

.about_container {
    display: grid;
    /* 默认分辨率：左侧20%，右侧75%，间距5% */
    grid-template-columns: 20% 75%;
    gap: 5%;
    /* 定义默认布局区域：左侧放selector，右侧上下放skills和text */
    grid-template-areas: 
      "selector skills"
      "selector text";
}

/* 给每个模块绑定对应的Grid区域 */
.selector-block {
    grid-area: selector;
}
.skills-block {
    grid-area: skills;
}
.text-block {
    grid-area: text;
}

/* 小分辨率适配 */
@media screen and (max-width: 600px) {
    .about_container {
        grid-template-columns: 1fr; /* 单列布局 */
        /* 定义小屏顺序：skills → selector → text */
        grid-template-areas: 
          "skills"
          "selector"
          "text";
        gap: 1rem; /* 增加垂直间距，提升移动端可读性 */
    }
}

方案优势 #

• 完全保留默认分辨率下的原有布局效果
• 通过Grid区域定义，布局逻辑清晰直观
• 移动端元素顺序精准符合需求，避免复杂的层级控制

内容的提问来源于stack exchange，提问作者Greg