是否可以通过 MediaQueries 更改在较小分辨率下显示的布局而不更改默认布局？

Question

我在默认分辨率上使用“网格模板列”布局，使元素按预期显示，但在较小的分辨率上，它们由容器优先级渲染，创建我想要更改的视觉效果。

在默认分辨率下： 在显示屏左侧呈现，然后在显示屏的另一端呈现 ，然后是

位于其下方。在较小的分辨率上，我想让元素在此布局中呈现： 然后 然后

一个每个都在另一个之下。

<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;
    }
}

Answer 1

考虑应用显示：内容 在窄断点处的列包装器上，以便它们的布局框被它们的子级替换，从而有效地使它们的子级成为网格布局的子级。这样我们就可以使用 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>