css - モバイルでグリッドを交換できる必要がある

Question

私が信じている写真で最もよく説明されています。 私のウェブサイト。

ウェブサイトのホスティングを設定したので、見やすくなりました。

問題 : セットアップ方法が原因でモバイル デバイスを使用すると、以下のように写真が間違った方法でスタックされます。

質問 : 画面が X ピクセル未満の場合に、これら 2 つの col-md 6 を切り替える方法はありますか?

Answer 1

あなたの質問はOrder of div on mobile の複製になります。Bootstrap を使用してこのモバイル/デスクトップ レイアウトを達成することは可能ですか? （または他のグリッド）またはブートストラップ 3 を使用した記事のプッシュ/プル配置なので、これも閉じることに投票します。

あなたの場合、基本的にこれを行います：

CSS:

.floatright{float:right;} @media (最大幅: 767px) { .floatright{float:none;} }

中 (col-md- ) グリッドを使用する場合は、767 を 991 に変更してください。あなたの場合、小さなグリッド (col-sm- ) を優先する必要があります。これは、grid-float-breakpoint もデフォルトで 767px に設定されているためです (参照: Bootstrap 3 Navbar Collapse )

html:

<div class="container"> 
    <div class="row">
        <div class="col-sm-6">text</div>
        <div class="col-sm-6">img</div>
    </div>  
    <div class="row">
        <div class="col-sm-6 floatright">text</div>
        <div class="col-sm-6">img</div>
    </div>
    <div class="row">
        <div class="col-sm-6">text</div>
        <div class="col-sm-6">img</div>
    </div>  
</div>

「col-md-6が行divにない106行目」についても言及しました。あなたは正しく、私はここで間違っていました (タイプミス)。上記のコードは正しいコードで、列が行でラップされています。ドキュメントhttp://getbootstrap.com/css/#grid-example-mixed-completeは、必須ではない列の合計が常に 12 になることを示しています。これはここでは当てはまりませんが、上記は 1 行のすべての列でも機能します。お気に入り：

<div class="container"> 
    <div class="row">
        <div class="col-sm-6">text</div>
        <div class="col-sm-6">img</div>

        <div class="col-sm-6 floatright">text</div>
        <div class="col-sm-6">img</div>

        <div class="col-sm-6">text</div>
        <div class="col-sm-6">img</div>
    </div>  
</div>