Wie kann ich Divs im Bootstrap neu anordnen?

-1

Ich habe drei divs wie untenWie kann ich Divs im Bootstrap neu anordnen?

<div class="col-lg-4"> A</div> 
<div class="col-lg-4"> B </div> 
<div class="col-lg-4"> C </div>

Grundsätzlich für xs Geräte, es ist wie

A, möchte ich es jedoch

wird wie

Wie kann ich das tun?

Quelle

2016-08-13 Hello Universe

Nun scheint es, wie so. Eine andere Stackoverflow-Frage ist jedoch nicht genau dieselbe. Das Beispiel teilt sich in 2/2 auf (wobei die zweite rechte Spalte wieder in 2/2 vertikal unterteilt ist). Das ist viel anders als das, was ich brauche, wo alle vertikal ausgerichtet sind. Das Ziehen/Drücken funktioniert nicht für meinen Fall. Danke –

verwenden JavaScript sort() Funktion:

Beispiel: (nicht kopieren/einfügen)

var obj = []; 
 
var example = ["A", "C", "B"]; 
 
$.each($("div"), function(index, value) { 
 
    
 
    obj[index] = $(this); 
 
}); 
 

 
obj.sort(function(a, b) { 
 
    var A = example.indexOf(a.text().trim()); 
 
    var B = example.indexOf(b.text().trim()); 
 
     if (A < B) { 
 
    return -1; 
 
    } 
 
    if (A > B) { 
 
    return 1; 
 
    } 
 
    return 0; 
 
}); 
 

 
$("body").prepend(obj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-lg-4"> A</div> 
 
<div class="col-lg-4"> B </div> 
 
<div class="col-lg-4"> C </div>

Verwenden Sie es zu lernen, nicht zu kopieren ;-)

Quelle

2016-08-13 13:37:34

Ich denke, Javascript ist die einzige Lösung dafür. Ich dachte daran, auch etwas Ähnliches zu verwenden. Allerdings hatte ich gehofft, dass es bereits eine unbekannte Bootstrap-Klasse gibt, die ich nicht kenne, die das für mich tun kann, ohne mehr Javascript hinzufügen zu müssen –

Sorry JQ, nicht CSS :) Dumm mich –

@HelloUniverse Hallo, es hängt davon ab, können Sie bekommen viel saubereres Ergebnis mit JQ/JS oder sogar JS entlang, data() ist eine sehr gute Option. CSS-only-Lösung ist in der Wildnis, aber einige nicht sehr gut unterstützt. –

Tauschen Sie B- und C-Code-Zeilen und Sie sind fertig.

Quelle

2016-08-13 13:33:02

Das ist keine Option, ich hatte dieses Problem auch –

HAHA Weg zu gehen: p –

Sie können Ihre divs mit CSS bestellen. Verwenden Sie die Bestelleigenschaft.

<div class="col-lg-4" id="A"> A</div> 
    <div class="col-lg-4" id="B"> B </div> 
    <div class="col-lg-4" id="C"> C </div>

Die CSS

#A{order:1;} 
    #B{order:3;} 
    #C{order:2;}

Wenn Sie möchten, dass für unterschiedliche Bildschirmgröße etwas anderes sein Medien-Anfragen nur nutzen!

Quelle

2016-08-13 13:48:22

Danke. Ich wusste nichts von der Bestelleigenschaft. HOwever, es ist nicht gültig für IE <11. Danke für die eine Antwort –

In Bootstrap ist dies einfach, dies in HTML zu lösen:

<div class="row"> 
<div class="col-lg-4 col-xs-12"> A</div> 
<div class="col-lg-4 col-lg-push-4 col-xs-12"> C </div> 
<div class="col-lg-4 col-lg-pull-4 col-xs-12"> B </div>

https://jsfiddle.net/MadalinaTn/x2w9nw9s/

Quelle

2016-08-13 14:03:28

hmm dachte ich gleich .. Muss ein Fehler in meinem Code sein ... einige andere CSS-Code innerhalb der div. Vielen Dank. Ja, meine Frage ist definitiv eine Wiederholung. –

Wie kann ich Divs im Bootstrap neu anordnen?

Antwort

Verwandte Themen