2カラムレイアウトのレスポンシブサイトを作りたい。デスクトップ画面の場合は 2 つの列が表示され、小さな画面 (スマートフォン) の場合は 1 つの列のみが表示されます。
列を切り替えるには、ユーザーは水平スワイプ (右から左または左から右) を行う必要があります。これは問題なく動作します (デスクトップ ユーザーの場合: マウスを使用してドラッグ & ドロップを行います)。
問題は、右の列に絶対位置があることです。左の列には静的な位置 (と思います) と100% の幅があります。小さな画面の場合、完全なレイアウトはメディア クエリによって相対的になります。右の列の幅の値がわかりません。複数のパーセンテージ値 (100% ～ 90%) を試してみましたが、適切な値を見つけたものの、特定のウィンドウ幅でしか機能しないことに気付きました。いくつかのピクセルのウィンドウのサイズを変更すると、ウィンドウが壊れます。
したがって、両方の列は、赤い枠線 (フィドル内) と同じ幅内/同じ幅にする必要があります。
小さな画面をシミュレートするために、結果ウィンドウのサイズを変更することを忘れないでください!
左の列に戻って、逆スワイプ/ドラッグ アンド ドロップを行うこともできます。
ここにフィドルがあります：http://jsfiddle.net/sUPfh/1/
別の解決策 (2) はありますが、幅は問題ありませんが、スライド効果が正しく機能しません。スライド効果中は、右の列が左の列の下にあります。エフェクトが終わるといきなり右の柱が適所に出現しますが、横からスライドするはずです。
css ウィンドウの右側の列のソリューションの 1 つを削除またはコメントするだけで、両方のソリューションを試すことができます。
/* solution 1 (width is not really percentage, when resize the window, but slide effect ok) */
position: absolute;
width: 94%; /* width only ok if the window width is about 695px */
/* solution 2 (width ok, but wrong slide effect */
/*
position: static;
width: 100%;
*/
PS: Twitter Bootstrap を less とカスタム グリッド レイアウトで使用しているため、生成された完全な CSS を追加します。重要な CSS ルールは、CSS ウィンドウの最後にある必要があります。