Est-il possible de modifier la mise en page affichée à des résolutions plus petites via MediaQueries sans modifier la mise en page par défaut ?

Question

J'utilise la disposition "Colonnes de modèle de grille" sur la résolution par défaut afin que les éléments apparaissent comme prévu, mais sur des résolutions plus petites, ils sont rendus par priorité de conteneur, créant ainsi l'effet visuel que je souhaite modifier.

À la résolution par défaut : s'affiche sur le côté gauche de l'écran, puis de l'autre côté de l'écran, puis 在显示屏左侧呈现，然后在显示屏的另一端呈现 ，然后是

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

< / code> se trouve en dessous. Sur des résolutions plus petites, j'aimerais que les éléments s'affichent dans cette disposition : puis puis

un pour chacun. est en dessous de l'autre.

<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

Envisagez d'appliquer 显示：内容 在窄断点处的列包装器上，以便它们的布局框被它们的子级替换，从而有效地使它们的子级成为网格布局的子级。这样我们就可以使用 order pour réorganiser les éléments enfants même s'ils se trouvent dans des éléments parents différents.

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