Best Jquery ,javascript, HTML5 CSS3 tutorial with jquery examples, php script , demos for beginners, web designers and web developers.

Jquery

Jquery Training

Jquery training blog

To change the column order in html using pure css

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 Continue Reading


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>
Please follow and like us:






About the author

Joydeb Choudhury holds a Master's degree in Computer Application from I.G.N.O.U. After working as a web developer in various companies he has started bloging in 2016.

Recent Posts of blog

Downalod Free Php Scripts