上部の固定ナビゲーションバーでレスポンシブレイアウトを作成しています。その下には、サイドバー（3）とコンテンツ（9）の2つの列があります。デスクトップではこれは次のようになります

ナビゲーションバー
[3] [9]

私はときにresize、モバイルにnavbar圧縮され、隠されている、そしてサイドバーはこのように、コンテンツの上に積層されています：

ナビゲーションバー
[3]
[9]

メインコンテンツを一番上に配置したいので、モバイルでの順序を次のように変更する必要があります。

ナビゲーションバー
[9]
[3]

同じ点をカバーするこの記事を見つけましたが、受け入れられた回答は、ソリューションがBootstrapの現在のバージョンには適用されないと言って編集されています。

モバイルでこれらの列を並べ替えるにはどうすればよいですか？または、代わりに、sidbarリストグループを拡張ナビゲートにどのように取り込むことができますか？

これが私のコードです：

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
  </div>
</div><!--end sidebar-->


<div class="col-lg-9">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="page-header">
     Main Content
    </div>
  </div>
</div><!--end main content area-->

小さな画面では列の順序を変更できませんが、大きな画面では変更できます。

したがって、列の順序を変更します。

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

デフォルトでは、メインコンテンツが最初に表示されます。

したがって、モバイルではメインコンテンツが最初に表示されます。

col-lg-pushおよびを使用してcol-lg-pull、大画面の列を並べ替えて、左側にサイドバーを表示し、右側にメインコンテンツを表示できます。

ここで作業フィドル。

2018年更新

以下のために、元に基づいて質問ブートストラップ3、解決策をしたプッシュプルを使用します。

ではブートストラップ4それは今だ可能、順序を変更するには列が全角に積層された場合でも、、縦にブートストラップ4フレキシボックスへの感謝を。OFC、プッシュプルメソッドは引き続き機能しますが、Bootstrap 4で列の順序を変更する方法が他にもあり、全幅の列を並べ替えることができます。

方法1 -使用flex-column-reverseのためxsの画面：

<div class="row flex-column-reverse flex-md-row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9">
        main
    </div>
</div>

方法2 -使用order-firstのためxsの画面：

<div class="row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9 order-first order-md-last">
        main
    </div>
</div>

Bootstrap 4（alpha 6）：http : //www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.1：https : //www.codeply.com/go/e0v77yGtcr

元の3.x回答

以下のために、元に基づいて質問ブートストラップ3、解決策をしたプッシュプルを使用し、より大きな幅のために、その後の列が表示されます小さい（XS）幅の彼らの自然な順序です。（ABはBAの逆）。

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3">
            main
        </div>
        <div class="col-md-3 col-md-pull-9">
            sidebar
        </div>
    </div>
</div>

ブートストラップ3：http : //www.codeply.com/go/wgzJXs3gel

@emreは、「小さな画面では列の順序を変更できませんが、大きな画面では変更できます」と述べています。ただし、ブートストラップ3では「全幅の「スタックされた」列の順序を変更することはできません。」と明記する必要があります。

ここでの答えは2つのセルに対してのみ機能しますが、これらの列にセルが増えるとすぐに、少し複雑になる可能性があります。複数の列の任意の数のセルに対する一般化されたソリューションを見つけたと思います。

ゴール

モバイルでタグの垂直方向のシーケンスを取得し、タブレット/デスクトップでデザインが要求する順序でそれらを配置します。この具体的な例では、1つのタグが通常より早くフローに入る必要があり、別のタグが通常より遅くフローに入る必要があります。

モバイル

[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]

Tablet +

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][5 desc    ]
[4 caption][          ]
[         ][          ]

したがって、見出しはタブレット+で正しくシャッフルする必要があり、技術的にはdescも同様です。モバイルでは、それに先行するキャプションタグの上に配置されます。すぐに4つのキャプションも問題になっていることがわかります。

すべてのセルの高さが異なる可能性があり、次のセルで上から下にフラッシュする必要があるとしましょう（テーブルのような弱いトリックを除外します）。

すべてのBootstrap Gridの問題と同様に、ステップ1は、HTMLがページ上でモバイルオーダー1 2 3 4 5でなければならないことを認識することです。次に、タブレット/デスクトップをこの方法で並べ替える方法を決定します-理想的にはJavascriptなしで。

左ではなく右に座って解決するには1 headline、3 qty両方を設定するだけpull-rightです。これはCSS float: rightに適用されます。つまり、右に合う最初のオープンスペースを見つけます。ブラウザのCSSプロセッサは次の順序で機能していると考えることができます。1は右上隅に収まります。2は次であり、通常（float: left）なので、左上隅に移動します。次に3です。つまり、float: right1の下を飛び越えます。

しかし、この解決策では不十分でした4 caption。右側の2つのセルが2 image左側で非常に短いため、両方を組み合わせるよりも長くなる傾向があります。ブートストラップグリッドは、栄光のフロートハック4 caption ですfloat: left。つまり、です。2 image左のように多くの部屋を占有し、4 caption次の使用可能なスペースに収まるようにしよう-多くの場合、右側の列ではなく、我々はそれを望んでいた左。

ここでの解決策（より一般的には、このような問題の場合）は、モバイルで非表示になっている、タブレット+に存在するハックタグを追加してキャプションを押し出し、マイナスのマージンで覆われるようにすることです。

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][4 hack    ]
[5 caption][6 desc ^^^]
[         ][          ]

http://jsfiddle.net/b9chris/52VtD/16633/

HTML：

<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>

CSS：

#hack { height: 50px; }

@media (min-width: @screen-sm) {
    #desc { margin-top: -50px; }
}

したがって、ここでの一般的な解決策は、モバイルで表示されなくなる可能性があるハックタグを追加することです。tablet +では、ハックタグを使用すると、表示されたタグをフローの前または後に表示し、プルアップまたはプルダウンしてそれらのハックタグを隠すことができます。

注：リンクされたjsfiddleの簡単な例のために固定高さを使用しましたが、実際に作業していたサイトコンテンツは、5つのタグすべてで高さが異なります。これは、タグの高さ、特に画像と説明のばらつきが比較的大きくても適切にレンダリングされます。

注2：レイアウトによっては、tablet +（またはより大きな解像度）で列の順序が十分に一貫している場合があります。これにより、margin-bottom代わりに次のように使用して、ハックタグの使用を回避できます。

注3：これはBootstrap 3を使用しています。Bootstrap4は異なるグリッドセットを使用しており、これらの例では機能しません。

http://jsfiddle.net/b9chris/52VtD/16632/

2017年10月

別のBootstrap 4ソリューションを追加したいと思います。私のために働いたもの。

CSSの「Order」プロパティをメディアクエリと組み合わせると、小さい画面にスタックされたときに列を並べ替えることができます。

このようなもの：

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

CodePenリンク： https ://codepen.io/preston206/pen/EwrXqm

画面サイズを調整すると、列が別の順序で積み重なっていることがわかります。

これを元のポスターの質問に関連付けます。CSSを使用すると、navbar、サイドバー、およびコンテンツをターゲットにして、メディアクエリ内で適用されるプロパティを並べ替えることができます。

ではブートストラップ4、あなたはこのような何かをしたい場合は：

    Mobile  |   Desktop
-----------------------------
    A       |       A
    C       |   B       C
    B       |       D
    D       |

あなたは、の順番逆にする必要があるBを、その後C適用し、その後order-{breakpoint}-firstにB。2つの異なる設定を適用します。1つは同じcolsを共有し、もう1つは12 colsの幅全体を使用します。

• 小さい画面：12列からBまで、12列からCまで

• 大きな画面：それらの合計の間に12列（B + C = 12）

このような

<div class='row no-gutters'>
    <div class='col-12'>
        A
    </div>
    <div class='col-12'>
        <div class='row no-gutters'>
            <div class='col-12 col-md-6'>
                C
            </div>
            <div class='col-12 col-md-6 order-md-first'>
                B
            </div>
        </div>
    </div>
    <div class='col-12'>
        D
    </div>
</div>

デモ： https : //codepen.io/anon/pen/wXLGKa

これは、jQueryでinsertAfter（）またはinsertBefore（）を使用すると非常に簡単です。

<div class="left">content</div> <div class="right">sidebar</div>

<script>
$('.right').insertBefore('left');
</script>

その単純な

モバイルデバイスの条件を設定したい場合は、このようにすることができます

<script>
  var $iW = $(window).innerWidth();
  if ($iW < 992){
     $('.right').insertBefore('.left');
  }else{
     $('.right').insertAfter('.left');
  }
</script>

例 https://jsfiddle.net/w9n27k23/

最初にモバイルバージョンから始めて、ほとんどの場合、必要なことを達成できます。

ここに例：

http://jsbin.com/wulexiq/edit?html,css,output

<div class="container">
      <h1>PUSH - PULL Bootstrap demo</h1>
    <h2>Version 1:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 col-sm-push-3 green">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 2:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 3:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 cyan">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
        IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW XS-SMALL SCREEN
      </div>

    </div>

    <h2>Version 4:</h2>
    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 beige">
        MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

  </div>