ブラウザのサイズに基づいて要素の順序を変更するにはどうすればよいですか？

Question

私は水平に積み重ねられた3つのボタンを持っています。クリックすると、各ボタンにdiv要素が表示されます。ブラウザがモバイルビューにリサイズされると、要素を垂直方向に積み重ねる必要があります。これはデフォルトで行われますが、関連するボタンのすぐ下にdiv要素を直接積み重ねたいと思います。

これは私が（左デスクトップ、モバイル右）を表示したいものです。

これは私が（左デスクトップ、モバイル右）得るものです：

ここに基本的なHTMLがあります。関連するdivをボタンのすぐ下に移動すると、モバイルでは正常に表示されますが、デスクトップでは正しく表示されません。

<button onclick="updateValue(1)">Button 1</button> 
<button onclick="updateValue(2)">Button 2</button> 
<button onclick="updateValue(3)">Button 3</button> 
<div id="div-1"><span>This is div 1!</span></div> 
<div id="div-2"><span>This is div 2!</span></div> 
<div id="div-3"><span>This is div 3!</span></div> 

私はボタンで浮動小数点数を使用しようとしましたが、希望の出力が得られませんでした。ここに私が今持っていることを示すフィドルがあります。

JSFIDDLE

それでは、どのように私は、携帯電話のボタン>デスクトップ上のdiv>要素ボタン+ボタン+ボタンを注文し、ボタン> div>のボタンのですか？

Answer 1

ここ@Lefkaはフレキシボックスモデルを使用した例です。
例をフルページビューで420px未満のウィンドウにリサイズすると、エレメントは予想通りに並べ替えられます。
あなたのニーズを把握するのに役立ちます。

function updateValue(newValue) { 
 
    for (i = 1; i <= 3; i++) { 
 
    var element = document.getElementById("div-" + i); 
 
    element.className = ""; 
 
    if (newValue === i) { 
 
     element.className = "show"; 
 
    } 
 
    } 
 
}

div { 
 
    display: none; 
 
} 
 

 
.show { 
 
    display: block; 
 
} 
 

 
.flex-parent { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
    align-content: stretch; 
 
    align-items: flex-start; 
 
} 
 

 
button { 
 
    flex: 0 0 auto; 
 
} 
 

 
[id^="div-"] { 
 
    flex: 1 1 100%; 
 
} 
 

 
@media screen and (max-width: 420px) { 
 
    .flex-parent { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: nowrap; 
 
    justify-content: flex-start; 
 
    align-content: stretch; 
 
    align-items: flex-start; 
 
    } 
 
    
 
    .button-1 { 
 
    order: 0; 
 
    } 
 
    
 
    .button-2 { 
 
    order: 2; 
 
    } 
 
    
 
    .button-3 { 
 
    order: 4; 
 
    } 
 
    
 
    #div-1 { 
 
    order: 1; 
 
    } 
 
    
 
    #div-2 { 
 
    order: 3; 
 
    } 
 
    
 
    #div-3 { 
 
    order: 5; 
 
    } 
 
}

<div class="flex-parent"> 
 
    <button class="button-1" onclick="updateValue(1)">Button 1</button> 
 
    <button class="button-2" onclick="updateValue(2)">Button 2</button> 
 
    <button class="button-3" onclick="updateValue(3)">Button 3</button> 
 
    <div id="div-1"><span>This is div 1!</span></div> 
 
    <div id="div-2"><span>This is div 2!</span></div> 
 
    <div id="div-3"><span>This is div 3!</span></div> 
 
</div>

Answer 2

新しいDIVを追加できますか？

<div> 
 
<button onclick="updateValue(1)">Button 1</button> 
 
<button onclick="updateValue(2)">Button 2</button> 
 
<button onclick="updateValue(3)">Button 3</button> 
 
</div> 
 
<div id="div-1"><span>This is div 1!</span></div> 
 
<div id="div-2"><span>This is div 2!</span></div> 
 
<div id="div-3"><span>This is div 3!</span></div>

Answer 3

まず、そのそれぞれのボタンの下にそれぞれのdivを移動します。

<button onclick="updateValue(1)">Button 1</button> 
<div id="div-1"><span>This is div 1!</span></div> 
<button onclick="updateValue(2)">Button 2</button> 
<div id="div-2"><span>This is div 2!</span></div> 
<button onclick="updateValue(3)">Button 3</button> 
<div id="div-3"><span>This is div 3!</span></div> 

は、次にCSSメディアクエリを使用して、デスクトップサイズで絶対にボタンの列の下のdivを配置して、モバイルサイズで正常に配置され、それを残すことができます。

button { 
    display: block; 
} 
div { 
    display: none; 
} 
.show { 
    display: block; 
} 

@media (min-width: 768px) { 
    button { 
    display: inline; 
    } 
    .show { 
    position: absolute; 
    top: 30px; 
    } 
} 

ここにはfiddle with a working exampleがあります。

Answer 4

Button1とDiv1をコンテナdivに入れ、width =ボタンの幅とオーバーフローをvisibleに設定します。必要に応じて他のボタンを繰り返します。必要に応じてdivを広げます。

<div id=superContainer> 
    <div id=subContainer1> 
     <button onclick="updateValue(1)">Button 1</button> 
     <div id="div-1"><span>This is div 1!</span></div> 
    </div> 
    <div id=subContainer2> 
     <button onclick="updateValue(2)">Button 2</button> 
     <div id="div-2"><span>This is div 2!</span></div> 
    </div> 
    <div id=subContainer3> 
     <button onclick="updateValue(3)">Button 3</button> 
     <div id="div-3"><span>This is div 3!</span></div> 
    </div> 
</div> 

Answer 5

function updateValue(div) 
 
{ 
 
    $('DIV > DIV').hide(); 
 
    $('#div-'+ div).show() 
 
}

.parent{position:relative} 
 

 
DIV > DIV{display:none; position:absolute} 
 

 

 
@media (max-width: 480px) { 
 
    DIV > DIV{display:none; position:relative} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="parent"> 
 
<button onclick="updateValue(1)">Button 1</button> 
 
<div id="div-1"><span>This is div 1!</span></div> 
 
<button onclick="updateValue(2)">Button 2</button> 
 
<div id="div-2"><span>This is div 2!</span></div> 
 
<button onclick="updateValue(3)">Button 3</button> 
 
<div id="div-3"><span>This is div 3!</span></div> 
 
</div>