Reorder div ohne Verwendung der Anzeigetabelle

Question

Ich muss div in meiner mobilen Version neu anordnen, aber ich kann nicht verwenden: Tabelle in meinem Elternteil div, weil es mein responsives Layout unterbricht. Ich muss hier zwischen zusätzlichen 1 und 2.

<div class="product-view"> 
<form action> </form> 
<div class="box-additional1"></div> 
<div class="box-additional2"></div> 
</div> 

Kann nicht verwenden, um die beschriebene Lösung wechseln: CSS layout, use CSS to reorder DIVs Soll ich Javascript verwenden Sie stattdessen?

dank

Answer 1

Sie können dies erreichen, indem display: flex; auf das übergeordnete Element Einstellung und Verwendung order seine Kinder neu zu ordnen. Sehen Sie sich das Beispiel (und das Vollbildbeispiel) unten an.

Was es tut:

Die CSS um Eigenschaft, um die Bestellung zu legen flex Produkte in ihrem Flex Behälter verwendet angibt. Die Elemente sind in aufsteigender Reihenfolge des Bestellwerts angelegt. Elemente mit dem gleichen Bestellwert werden in der Reihenfolge, in der sie im Quellcode erscheinen, in angelegt.

Lesen Sie mehr über die order Eigenschaft bei Mozilla Developer Network.

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.product-view { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
.box-additional1, .box-additional2 { 
 
    width: 100%; 
 
    height: 100px; 
 
    flex-basis: 100%; 
 
} 
 

 
.box-additional1 { 
 
    background: red; 
 
} 
 

 
.box-additional2 { 
 
    background: darkRed; 
 
} 
 

 
@media screen and (min-width: 640px) { 
 
    
 
    .box-additional1 { 
 
    order: 2; 
 
    } 
 
    
 
    .box-additional2 { 
 
    order: 1; 
 
    } 
 
}

<div class="product-view"> 
 
<form action> </form> 
 
<div class="box-additional1"></div> 
 
<div class="box-additional2"></div> 
 
</div>

Answer 2

Haben Sie es auf ein Aktionsereignis zu tun? Wenn Sie dies für ein Aktionsereignis tun müssen, empfehle ich die Verwendung von JQuery. verwenden Nur eine Kombination aus detach und append:

var product = $('.product-view'); 
var first = product.children().eq(1).detach(); 
var second = product.children().eq(0).detach(); 
product.append(second); 
product.append(first); 

die Geige Siehe: https://jsfiddle.net/2vaxg8rp/