表示まずDIV

Question

方法のdiv Aの上にエンドユーザーのビューのdiv Bがブラウザ上でできる

<div id="A"></div> 
<div id="B"></div> 

...私が持っていると言いますか？

私はhtmlを編集せずにCSSでこれをやろうとしています。

Answer 1

CSSでこれを行う方法は：コンテナがdisplay:flex属性その後

持っている必要があります

：

#A{ 
    order:2; 
} 

#B{ 
    order:1; 
} 

をあなたはまた、jQueryの

$('#B:parent').each(function() { 
    $(this).insertBefore($(this).prev('#A')); 
}); 

Answer 2

ことでこれを達成することができますこの方法では汚れているように感じますが、ここでは行きます（コンテナ要素なし）

#A { 
 
    display: table-footer-group; 
 
} 
 

 
#B { 
 
    display: table-header-group; 
 
}

<div id="A">A</div> 
 
<div id="B">B</div>

必要

Answer 3

使用CSS3 flex

CSS順序プロパティはフレックスをレイアウトするために使用順序を指定し、これはorder property使用して行うことができるとフレックスの要素の配置を変更するにはフレックスコンテナ内のアイテム

#box{ 
 
\t display:flex; 
 
\t width:100%; 
 
\t flex-direction:column; 
 
} 
 
.A{ 
 
\t order:2; 
 
    background:#111; 
 
    color:#fff; 
 
} 
 
.B{ 
 
\t order:1; 
 
    background:#111; 
 
    color:#fff; 
 
}

<div id="box"> 
 
<div class="A">A</div> 
 
<div class="B">B</div> 
 
</div>

Answer 4

あなたはあなたが追加する必要があり

body { 
 
    display: flex; 
 
    flex-wrap:wrap; 
 
} 
 

 
#A { 
 
    width: 100%; 
 
    height:50px; 
 
    background: red; 
 
    color:white; 
 
    order: 2; 
 
} 
 

 
#B { 
 
    width: 100%; 
 
    height:50px; 
 
    background: black; 
 
    color:white; 
 
    order: 1; 
 
}

<div id="A">A</div> 
 
<div id="B">B</div>

Answer 5

欲しいものをacheiveするflex-boxとorderを使用することができますdisplay:flex;とflex-direction:column-reverse;を2つのdivの親に追加します。

body{ 
    display:flex; 
    flex-direction:column-reverse; 
} 

それとも、div要素の順序を手動でorderプロパティを選択することができます。これは完全にこれを行うにはforfbiddenさ

body { 
    display: flex; 
} 

#A { 
    order: 2; 
} 

#B { 
    order: 1; 
}