Scott Scott - 12 days ago 5
CSS Question

CSS Responsive - change order of 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>





Is their a way I can change the orders of divs based on the type of device I am browsing my site on? I am attempting to create a responsive design. I created this very simple sample which essentially has 3 divs. They are in order 1, 2,3 on a desktop. I added media queries in my css to handle mobile devices. I want the order to change from 2,1,3. I am sure there must be a way to accomplish this with css only, but I am not familiar enough with it. Any ideas? Thanks

<!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>

Answer

Use flex to display the elements and change the order using 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>

Method 2:- (Works in all browser)

Add hidden div which will show only when max-width:400px and hide the original div. it will work even IE-9 and in lower versions too

<!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>