モバイルレイアウトでBootstrap 3の列の順序を変更する方法
私は一番上の固定ナビゲーションバーでレスポンシブレイアウトを作っています。その下には2つの列があり、1つはサイドバー（3）用、もう1つはコンテンツ（9）用です。デスクトップ上でこれはどのように見えますか
ナビゲーションバー
[3] [9]
resizeをモバイルにすると、navbarは圧縮されて非表示になり、サイドバーはコンテンツの上に重ねられます。
ナビゲーションバー
[3]
[9]
一番上にメインコンテンツが欲しいのですが、モバイルでの順番をこれに変える必要があります。
ナビゲーションバー
[9]
[3]
私は この記事 を見つけましたが、これは同じ点をカバーしていますが、解決策は現在のバージョンのBootstrapには当てはまらないと言うように、受け入れられた答えを編集しました。
携帯でこれらの列を並べ替えるにはどうすればよいですか。あるいは、sidbar list-groupを拡張用ナビゲーションバーに追加する方法はありますか。
これが私のコードです：
<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を使用することで、大画面で列を並べ替え、左側にサイドバーを表示し、右側にメインコンテンツを表示できます。
Working ここをいじる 。
2018年に更新
Bootstrap 3に基づく original 質問の場合、解決策はuse Push-引く。
Bootstrap 4では、順序を変更するために possible になりました。 Bootstrap 4 flexboxのおかげで、全角スタック垂直に。 OFC、Push pullメソッドは引き続き機能しますが、Bootstrap 4で列の順序を変更する他の方法があり、全幅の列を並べ替えることができます。
方法1-xs画面にflex-column-reverseを使用します。
<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-xs画面にorder-firstを使用：
<div class="row">
<div class="col-md-3">
sidebar
</div>
<div class="col-md-9 order-first order-md-last">
main
</div>
</div>
ブートストラップ4（アルファ6）： http://www.codeply.com/go/bBMOsvtJhD
ブートストラップ4.1： https://www.codeply.com/go/e0v77yGtcr
Original 3.x Answer
Bootstrap 3に基づく original 質問の場合、解決策はuse Push-幅が大きい場合はpullになり、列は小さい（xs）幅の自然な順序になります。 （A-BはB-Aと逆）。
<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は、「小さな画面では列の順序を変更できませんが、大きな画面では変更できます」と述べました。ただし、これは次のように明確にする必要があります。「 full-width "stacked" columns。の順序は変更できません。 「Bootstrap 3。
ここでの答えはたった2つのセルに対してうまくいきますが、それらの列にそれらがより多く含まれるようになるとすぐに、それはもう少し複雑さにつながる可能性があります。私は、複数の列にあるセルの数にかかわらず一般化された解決策を見つけたと思います。
目標
タブレット/デスクトップでデザインが要求する順序で自分自身を配置するためにモバイルでタグの垂直方向のシーケンスを取得します。この具体例では、1つのタグが通常より早く、もう1つのタグが通常より遅くフローに入る必要があります。
モバイル
[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]
タブレット+
[2 image ][1 headline]
[ ][3 qty ]
[ ][5 desc ]
[4 caption][ ]
[ ][ ]
そのため見出しはtablet +で正しくシャッフルする必要があり、技術的にもそうです - モバイルでは見出しの前にあるcaptionタグの上に配置されています。あなたは一瞬のうちに4キャプションにも問題があるのを見るでしょう。
すべてのセルは高さが異なる可能性があり、次のセルと上下が同じ高さである必要があると仮定しましょう（テーブルのような弱いトリックを排除する）。
すべてのブートストラップグリッド問題と同様に、ステップ1は、HTMLがページ上でモバイル順になっている必要があることを認識することです。次に、タブレット/デスクトップをこの方法で並べ替える方法を決定します - 理想的にはJavascriptなしで。
1 headlineと3 qtyを左ではなく右に座らせるには、単に両方をpull-rightに設定するのが解決策です。これはCSSのfloat: rightに適用されます。つまり、彼らは最初に適切なスペースを見つけるでしょう。ブラウザのCSSプロセッサは次の順序で動作していると考えることができます。1は右上隅に収まります。 2が次にあり、通常（float: left）なので、左上隅に行きます。それから3、これはfloat: rightなので、1の下に飛び越えます。
しかし、この解決策は4 captionには不十分でした。右側の2つのセルが非常に短いため、左側の2 imageは両方を組み合わせたものよりも長くなる傾向があります。 Bootstrap Gridは、4 captionがfloat: leftであることを意味する、崇高なフロートハックです。 2 imageは左側の非常に多くのスペースを占めているので、4 captionは次に利用可能なスペースに収まるように試みます。多くの場合、希望する場所の左側ではなく右側の列です。
ここでの解決策（より一般的にはこのような問題に対する解決策）は、タブレットに存在するハックタグをPush +キャプションアウトに追加し、その後マイナスのマージンで隠されるようにすることでした。
[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つのタグすべてで高さが異なります。タグの高さ、特にimageとdescの比較的大きな変動で適切にレンダリングされます。
注2： あなたのレイアウトによっては、Tablet +（またはそれ以上の解像度）では十分な列の並び順を保つことができ、代わりにmargin-bottomを使ってハックタグの使用を避けることができます。
注3： これはブートストラップ3を使用します。ブートストラップ4は別のグリッドセットを使用するため、これらの例では機能しません。
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を使用すると、ナビゲーションバー、サイドバー、およびコンテンツをターゲットにして、メディアクエリ内で適用されるプロパティを並べ替えることができます。
ブートストラップ4 で、あなたがこのようなことをしたいのなら：
Mobile | Desktop
-----------------------------
A | A
C | B C
B | D
D |
_ b _ の順序を逆にして _ c _ にしてから _ b _ にorder-{breakpoint}-firstを適用する必要があります。そして2つの異なる設定を適用します。1つは同じcolsを共有するようにし、もう1つは12 colsの全幅を使用するようにします。
小さい画面： _ b _ に12桁、 _ c _ に12桁
大きい画面：それらの合計の間に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>
最初にモバイル版から始めて、あなたはほとんどの時間、あなたが望むものを達成することができます。
ここでの例：
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>