Das Szenario drei Spalten als zwei Bestellung ist:Bootstrap Spalte Reihenfolge: Auf Mobil, über ein
[A][B][C]
Als ich nach XS bewegen, ich bestellen möchten:
[A][C]
[B]
dies möglich ist, mit die folgende Struktur? Muss ich neu anordnen?
<div class="col-sm-3">A</div>
<div class="col-sm-6">B</div>
<div class="col-sm-3">C</div>
standardmäßig in Bootstrap, wenn die Spaltenanzahl von mehr als 12 in einer gegebenen Zeile ist, werden alle Spalten über die Markierung zu einer neuen Zeile bewegt werden.
Sie können auch individuelle Spaltengrößen für jede Bildschirmgröße festlegen, indem Sie die Bildschirmgrößenklasse auf <div> verketten.
Mit diesem wird gesagt, Sie so etwas tun könnte:
<div class="row">
<div class="col-xs-6 col-sm-3">A</div>
<div class="col-xs-6 col-sm-6">B</div>
<div class="col-xs-12 col-sm-3">C</div>
</div>
Auf kleinen Bildschirmen, dies als würde angezeigt werden:
[___][______][___]
Und auf extra kleine Bildschirme wie:
[______][______]
[______________]
Fühlen Sie sich frei, die Spaltengrößen an Ihre Bedürfnisse anzupassen, nur sicher sein,> 12 Spalten in derzu haben, um die zusätzliche Spalte zum Herunterdrücken zu zwingen.
Hoffe, dass hilft!
EDIT
Bootstrap unterstützt Umordnung Spalte auf Bildschirmgröße basiert, die col-X-pull-Y Klassen (Größe, Spalten). So ist eine einfache Lösung dafür ist:
<div class="row">
<div class="col-xs-6 col-sm-3">A</div>
<div class="col-xs-6 col-sm-3 col-sm-push-6">C</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-3">B</div>
</div>
Beachten Sie die Reihenfolge geändert, die die Zustände bei der niedrigsten Größe aufzunehmen hat, und ich einfach push und pull eine Spalte zu jeder größeren Größe zu positionieren, wo sie gebraucht wird.
Dies slots C einfach unter A und B. Ich brauche B unter A und C. – jlrolin
Oh ... Scheint, ich habe diese Anforderung verpasst. Gib mir eine Sekunde, ich denke, Bootstrap hat eine Möglichkeit, das zu handhaben, "Col-Push" und "Col-Pull" oder so ähnlich. –
Ich hatte das Gefühl, ich musste die Säulen physisch neu anordnen, dann schieben und ziehen, aber ich war mir nicht sicher wie. Vielen Dank. – jlrolin
Bootply: http://www.bootply.com/ziPH2ghaTB
HTML:
<div class="container">
<div class="col-xs-6 col-sm-4 a">a</div>
<div class="col-xs-6 col-sm-4 col-sm-push-4 c">c</div>
<div class="col-xs-12 col-sm-4 col-sm-pull-4 b">b</div>
</div>
B unter A und C oder nur unter A? – pbenard
@ Put12co22mer2 Das ist nur eine Frage der Änderung der Spaltengröße von '[B]', um mit dem von '[A]' anstelle von sowohl '[A]' und '[C]' übereinzustimmen; es ist unter '[A]' unabhängig :) –