次の HTML コードを考えてみましょう
私が必要とするのは、HTML 内の位置を変更するのではなく、クラス名を変更することで、ブラウザー ビューの上部に 3 番目のコンテンツを表示することです。 同時に、変更に対する応答性を維持する必要があります。
私のHTMLコードは次のとおりです
グリッドシステムを使用して注文します。次に、js を使用してシーケンス番号を変更し、3 番目の div が最初になるようにします。これが解決策になると思いますか?
詳細については、こちらをご覧ください: https://developer.mozilla.org/en-US/docs/Web/CSS/order
その後、JS を使用してシーケンス番号を変更できます
.wrapper{ display: flex; flex-flow: column; } .first{ order: 3; } .second{ order: 2; } .third{ order: 1; }
<html> <head> </head> <body> <div class="wrapper"> <section class="first">First Content</section> <section class="second">Second Content</section> <section class="third">ThirdContent</section> </div> </body> </html>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
グリッドシステムを使用して注文します。次に、js を使用してシーケンス番号を変更し、3 番目の div が最初になるようにします。これが解決策になると思いますか?
詳細については、こちらをご覧ください: https://developer.mozilla.org/en-US/docs/Web/CSS/order
リーリーその後、JS を使用してシーケンス番号を変更できます
.wrapper{ display: flex; flex-flow: column; } .first{ order: 3; } .second{ order: 2; } .third{ order: 1; }<html> <head> </head> <body> <div class="wrapper"> <section class="first">First Content</section> <section class="second">Second Content</section> <section class="third">ThirdContent</section> </div> </body> </html>