MIXED COLUMN LAYOUT

Run
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<style>	
   .column-1 {
    width: 25%;
	float:left;
	padding: 15px;
	background-color: yellow;
   }
   .column-2 {
    width: 25%;
	float:left;
	padding: 15px;
	background-color: cyan;
   }
   .column-3 {
    width: 25%;
	float:left;
	padding: 15px;
	background-color: lime;
   }
	@media screen and (max-width: 600px) {
	  .column-1 {
		width: 100%;
		float:left;
		padding: 15px;
		background-color: yellow;
	   }
	   .column-2 {
		width: 100%;
		float:left;
		padding: 15px;
		background-color: cyan;
	   }
	   .column-3 {
		width: 100%;
		float:left;
		padding: 15px;
		background-color: lime;
	   }
	}
</style>
</head>  
<body>
    <h2> Mixed column layout</h2>
	
	   <div class="column-1">
	     <h2> First column </h2>
		 <p> This is first column of our grid system</p>
	   </div>
	   <div class="column-2">
	     <h2> second column </h2>
		 <p> This is second column of our grid system</p>
	   </div>
	   <div class="column-3">
	     <h2> Third column </h2>
		 <p> This is third column of our grid system</p>
	   </div>
	
</body>
</html>