デザイナーによるデスクトップ コンプとモバイル コンプで常に遭遇することの 1 つは、HTML 要素の並べ替えです。私のページはすべてのブレークポイントで動作する必要があるため、ブラウザのサイズが変更されるとテキストが折り返されたり拡大されたりします (したがって、すべての高さは常に可変です)。
いくつかのシナリオを次に示します: (パイプはフロートまたは列を表します)
デスクトップ：
項目 1 | 項目 2 項目 3
モバイル：
項目 3 項目 1 項目 2
デスクトップ：
李
- コンテンツ
モバイル
李
-- 背景画像を保持
-- 背景画像の下 (基本的には LI の外側) の Li の内容を白い背景で表示します。
流動的なレイアウトを使用して、さまざまなブレークポイント間で HTML 要素を並べ替える最良の方法 (ある場合) は何ですか? JavaScript を使用してウィンドウのサイズ変更をリッスンするのはやり過ぎで、複数の要素を再配置する必要がある場合、絶対配置は機能しません。
誰かが解決策を知っている場合は、JSFiddle に投稿していただければ幸いです。