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 une 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 l'effet visuel que je souhaite modifier. À la résolution par défaut : effectue le rendu sur le côté gauche de l'écran, puis de l'autre côté de l'écran, puis en dessous. Sur des résolutions plus petites, je souhaite que les éléments s'affichent dans cette disposition : puis les uns en dessous des autres.

&l

P粉002546490 · Answer

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



  
    
      
    
    Selector
  

  
    Skills
    
      
        blablabla