CSS響應 - DIV的變化順序

#div1 { 
 
     position: relative; 
 
     max-width: 100%; 
 
     height: 100px; 
 
     background-color: green; 
 
     color: white; 
 
    } 
 

 
    #div2 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: red; 
 
      color: white; 
 
    } 
 

 
     #div3 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: blue; 
 
      color: white; 
 
    } 
 

 
    @media (max-width: 400px) { 
 

 
    #div1 { 
 
      position: absolute; 
 
     max-width: 100%; 
 
     height: 100px; 
 
     background-color: green; 
 
     color: white; 
 
    } 
 

 
    #div2 { 
 
     position: absolute; 
 
     left: 0; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: red; 
 
      color: white; 
 
    } 
 

 
     #div3 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: blue; 
 
      color: white; 
 
    } 
 

 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
<title></title> 
 
<meta charset="utf-8" /> 
 
    
 
<body> 
 

 
<div id="div1"> 
 
    <h1>Box 1</h1> 
 
</div> 
 

 
<div id="div2"> 
 
    <h1>Box 2</h1> 
 
</div> 
 
<div id="div2"> 
 
    <h1>Box 3</h1> 
 
</div> 
 

 
</body> 
 
</html>

是他們的一種方法，我可以改變的div的基於設備的，我瀏覽我的網站上的類型的命令？我正在嘗試創建一個響應式設計。我創建了這個非常簡單的樣本，基本上有3個div。他們在桌面上依次爲1,2,3。我在我的CSS中添加了媒體查詢來處理移動設備。我希望訂單從2,1,3改變。我確信必須有一種方法才能用CSS來實現這一點，但我對此不夠熟悉。有任何想法嗎？由於

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<title></title> 
<meta charset="utf-8" /> 

<style> 
    #div1 { 
     position: relative; 
     max-width: 100%; 
     height: 100px; 
     background-color: green; 
     color: white; 
    } 

    #div2 { 
     position: relative; 
     max-width: 100%; 
      height: 100px; 
     background-color: red; 
      color: white; 
    } 

     #div3 { 
     position: relative; 
     max-width: 100%; 
      height: 100px; 
     background-color: blue; 
      color: white; 
    } 

    @media (max-width: 400px) { 

    #div1 { 
      position: absolute; 
     max-width: 100%; 
     height: 100px; 
     background-color: green; 
     color: white; 
    } 

    #div2 { 
     position: absolute; 
     left: 0; 
     max-width: 100%; 
      height: 100px; 
     background-color: red; 
      color: white; 
    } 

     #div3 { 
     position: relative; 
     max-width: 100%; 
      height: 100px; 
     background-color: blue; 
      color: white; 
    } 


    } 
</style> 

</head> 


<body> 

<div id="div1"> 
    <h1>Box 1</h1> 
</div> 

<div id="div2"> 
    <h1>Box 2</h1> 
</div> 
<div id="div2"> 
    <h1>Box 3</h1> 
</div> 

</body> 
</html>

來源

2016-11-28 Scott

我想你可以嘗試使用Flexbox的（https://css-tricks.com/snippets/css/a-guide -to-flexbox /）：查看訂單屬性。 –

謝謝，訂單屬性看起來像我需要但它似乎不支持IE 9，我可能需要 – Scott

恐怕，如果您需要支持IE9，最好的事情是使用一些JavaScript。 –

使用flex顯示元件和使用order

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
<title></title> 
 
<meta charset="utf-8" /> 
 

 
<style> 
 
    #div1 { 
 
     position: relative; 
 
     max-width: 100%; 
 
     height: 100px; 
 
     background-color: green; 
 
     color: white; 
 
    } 
 

 
    #div2 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: red; 
 
      color: white; 
 
    } 
 

 
     #div3 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: blue; 
 
      color: white; 
 
    } 
 

 
    @media (max-width: 400px) { 
 
    body{ 
 
    display:flex;/* 
 
    flex-direcion:row;*/ 
 
    } 
 
     #div2{ 
 
     order:-1; 
 
     } 
 

 
    #div1 {/* 
 
    position: absolute;*/ 
 
     max-width: 100%; 
 
     height: 100px; 
 
     background-color: green; 
 
     color: white; 
 
    } 
 

 
    #div2 {/* 
 
    position: absolute; 
 
    left: 0;*/ 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: red; 
 
      color: white; 
 
    } 
 

 
     #div3 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: blue; 
 
      color: white; 
 
    } 
 

 
    } 
 
</style> 
 

 
</head> 
 

 

 
<body> 
 

 
<div id="div1"> 
 
    <h1>Box 1</h1> 
 
</div> 
 

 
<div id="div2"> 
 
    <h1>Box 2</h1> 
 
</div> 
 
<div id="div3"> 
 
    <h1>Box 3</h1> 
 
</div> 
 

 
</body> 
 
</html>

方法2更改順序： - （適用於所有的瀏覽器）

添加將顯示隱藏的div只有當max-width:400px並隱藏原始div時。它會工作，即使IE-9和更低的版本太

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
<title></title> 
 
<meta charset="utf-8" /> 
 

 
<style> 
 
    #div1, #div1-alter { 
 
     position: relative; 
 
     max-width: 100%; 
 
     height: 100px; 
 
     background-color: green; 
 
     color: white; 
 
    } 
 
    #div1-alter{ 
 
     display:none; 
 
    } 
 

 
    #div2 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: red; 
 
      color: white; 
 
    } 
 

 
     #div3 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: blue; 
 
      color: white; 
 
    } 
 

 
    @media (max-width: 400px) { 
 

 
     #div2{ 
 
     order:-1; 
 
     } 
 

 
    #div1, #div1-alter {/* 
 
    position: absolute;*/ 
 
     max-width: 100%; 
 
     height: 100px; 
 
     background-color: green; 
 
     color: white; 
 
    } 
 

 
    #div2 {/* 
 
    position: absolute; 
 
    left: 0;*/ 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: red; 
 
      color: white; 
 
    } 
 

 
     #div3 { 
 
     position: relative; 
 
     max-width: 100%; 
 
      height: 100px; 
 
     background-color: blue; 
 
      color: white; 
 
    } 
 
    #div1{ 
 
     display:none; 
 
    } 
 
    #div1-alter{ 
 
     display:inherit; 
 
    } 
 
    } 
 
</style> 
 

 
</head> 
 

 

 
<body> 
 

 
<div id="div1"> 
 
    <h1>Box 1</h1> 
 
</div> 
 

 
<div id="div2"> 
 
    <h1>Box 2</h1> 
 
</div> 
 
<div id="div1-alter"> 
 
    <h1>Box 1</h1> 
 
</div> 
 
<div id="div3"> 
 
    <h1>Box 3</h1> 
 
</div> 
 

 
</body> 
 
</html>

來源

2016-11-28 19:59:28 jafarbtech

謝謝，flexbox方法正是我所需要的，但是我需要能夠適應舊版瀏覽器。我討厭根據屏幕尺寸顯示和隱藏div，但我可能別無選擇。 – Scott

Yaah。否則，你可以用JavaScript來做。如果你關心的只有css的舊瀏覽器，那麼這是最好的工作。 \t 接受和upvote，如果它真的有幫助。因此，爲像你這樣的人找到解決方案會很有幫助。 – jafarbtech

CSS響應 - DIV的變化順序

回答

相關問題