表示テーブルを使用せずにdivを並べ替え

Question

私のモバイル版でdivを並べ替える必要がありますが、私の親のdivにdisplay：tableを使用することができません。私が代わりにJavaScriptを使うべきCSS layout, use CSS to reorder DIVs ：私は

1の追加および2

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

切り替える必要 は、ここで説明するソリューションを使用することができませんか？

ありがとうございました

Answer 1

あなたは親要素にdisplay: flex;を設定し、その子の順序を変更orderを使用することによって、これを達成することができます。以下の例（および全画面例）を参照してください。

それは何：

CSS ためプロパティは、彼らのフレックスコンテナ内のアイテムフレックス をレイアウトするために使用順序を指定します。要素は、オーダー値の昇順で配列されます。 同じ順序値を持つ要素は、ソースコードに表示される順番に に配置されます。

orderプロパティの詳細については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

アクションイベントでやりたいですか？アクションイベントで行う必要がある場合は、JQueryを使用することをお勧めします。 ただdetachと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); 

はフィドルを参照してください：https://jsfiddle.net/2vaxg8rp/