CSS响应 - 改变div的顺序

时间：2016-11-28 18:23:38

标签： html css responsive-design

＆＃13;
＆＃13; 
#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;
    }

}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

他们是否可以根据我浏览网站的设备类型更改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>

1 个答案:

答案 0 :(得分：0)

使用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>

相关问题
最新问题