Column reverse is very essential specially for responsive design of website. Suppose a web page having sidebar and main content. If we see the web page it will come one after one. In this case if we need to change the order of the column mean if we want to see the sidebar first then the main content, we need tho reverse the columns for mobile device. Below is the working example of the “change the column order in html using pure css”
<html>

 

<head>

 

 

<title>Reverse column in pure css</title>

 

<style>

 

#primary,#secondary{width:45%; height:300px; border:1px solid #ccc; float:left}

 

@media (max-width:768px){

 

#primary,#secondary{width:100%;}

 

 

#main{

 

display: flex;

 

    flex-direction: column-reverse;

 

}

 

}

 

</style>

 

</head>

 

<body>

 

 

<div id=”main”>

 

<div id=”primary”>Primary</div>

 

<div id=”secondary”>Secondary</div>

 

</div>

 

 

 

</body>

 

</html>

Leave comment

Your email address will not be published. Required fields are marked with *.