要素が期待どおりに表示されるようにデフォルトの解像度で「グリッド テンプレート列」レイアウトを使用していますが、それより低い解像度ではコンテナの優先順位によってレンダリングされ、変更したい視覚効果が作成されます。
デフォルトの解像度の場合: はその下にあります。解像度が低い場合は、次のレイアウトで要素をレンダリングしたいと思います。 1 つずつ、すべてがもう 1 つの下にあります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
狭いブレークポイントで列ラッパーに
Display:Contentを適用することを検討してください。これにより、レイアウト ボックスがその子に置き換えられ、実質的にその子が作成されます。レベルはグリッド レイアウトの子になります。 。このようにして、orderを使用して、子要素が異なる親要素内にある場合でも、子要素の順序を変更できます。