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的变化顺序

回答

相关问题