css - メディアクエリのためにページの別の部分に脇に置く方法

Question

以下を想像してください。

上部のナビゲーションバー、ページの両側 (左右) のサイドバー、およびそれらの間に挟まれたコンテンツ div。デスクトップではすべてが見栄えがします。

モバイルビューの単一列レイアウトのメディアクエリを入力します。現在、レイアウトは Nav で、その下に左サイドバー、その下にコンテンツ、コンテンツの下に右サイドバーがあります。

私の質問は、モバイルメディアクエリの左側のサイドバーの下にある右側のサイドバーを取得する方法ですが、マークアップに触れずに CSS のみを変更することなく、デスクトップビューではそのままにしておく方法です。ここに私が何を意味するかを示すフィドルへのリンクがあります:

デスクトップレイアウトのすべてが

@media only screen and (min-width: 768px) { }

CSS ブロック。

score 0 · Accepted Answer

「 CSSのみを変更する」というご要望をいただいたことは承知しております。まず第一に、新しい cssorder機能を備えたソリューションがあるかもしれません。しかし、マークアップを少し変更するだけのもっと簡単な方法を使用してみませんか ( DEMO )。

次の例では、フィドルでソリューションを示すために必要のないすべてのコードを削除しました。

右のサイドバーをコンテンツ要素の前に移動し、デスクトップモードで左右にフロートさせることができます。

.sidebar {
    width: 20%;
}

.content {
    width: 60%;
    float: left;
}

.sidebar_right {
    float: right;
}

.sidebar_left {
    float: left;
}

モバイルモードでは、フロートを削除して、3 つの要素が元の「マークアップ位置」に戻るようにします。

@media only screen and (max-width: 768px) {    
    .sidebar, .content {
        float: none;
        width: 100%;
    }
}

1 に答える 1