Ist es möglich, das bei kleineren Auflösungen angezeigte Layout über MediaQueries zu ändern, ohne das Standardlayout zu ändern?

Question

Ich verwende das Layout „Grid Template Columns“ in der Standardauflösung, damit die Elemente wie erwartet angezeigt werden. Bei kleineren Auflösungen werden sie jedoch nach Containerpriorität gerendert, wodurch der visuelle Effekt entsteht, den ich ändern möchte.

Bei Standardauflösung: wird auf der linken Seite des Displays gerendert, dann auf der anderen Seite des Displays, dann 在显示屏左侧呈现，然后在显示屏的另一端呈现 ，然后是

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

< / code> befindet sich darunter. Bei kleineren Auflösungen möchte ich, dass die Elemente in diesem Layout gerendert werden: dann dann

jeweils eines für jedes liegt unter dem anderen.

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