How to move second div to first in mobile view using css ?

we may need to show divs in different ways in mobile views. Like the same now consider a situation there is a requirement to move the second div to first and first div to second in mobile view. for web view it is normal.

You can find below code that helps to move second div to first and first div to second using css.

If you want to test

Step 1 : the code just copy the code
Step 2 : open a editor or notepad and paste the code
Step 3 : save the code in any location with file extension “.html” , Eg : index.html
Step 4 : open the file in a browser and check the mobile view.

Move second div to first and first div to second using css

<html>
<style>
.parent{
width:100%;
}

.parent div
{
width:50%;
float:left;

}
@media only screen and (max-width: 767px) {
   
    .parent 
    {   
       display: table;
    }
    .parent div{width: 100%;float: none}
    .leftColumn
    {
        display:table-footer-group; 
  color:red;
     
  
    }
    .rightColumn
    {
        display: table-header-group;
      
    } 
 
 }
</style>
<body>

<div class="parent">
 <div class="leftColumn">
 This is the first div
 </div>

 <div class="rightColumn">
 This is the second div
 </div>
<div>

</body>

</html>

 

 

Leave a Reply