Reverse responsive frameworks (flex)

Useful for responsive website layouts (CSS)

by Ovi Stof

HTML

<div id="pagina_3_parti">
  <div id="sidebar_1_3">Stânga
  </div>
  <div  id="sidebar_2_3">Mijloc
  </div>
  <div  id="sidebar_3_3">Dreapta
  </div>
</div>

CSS

#pagina_3_parti {
	width: 100%;
  	border: 1px solid #c3c3c3;
  	display: -webkit-flex; /* Safari */
  	display: flex;
}
#sidebar_1_3, #sidebar_2_3, #sidebar_2_3 {
	float:left;
}
#sidebar_1_3 {
	border:3px solid red;
	color:red;	
    background:RGBA(255,0,0,0.1)
}
#sidebar_2_3 {
	border:3px solid green;
	color:green;	
    background:RGBA(0,255,0,0.1)    
}
#sidebar_3_3 {
	border:3px solid blue;
	color:blue;	
    background:RGBA(0,0,255,0.1)    
}
@media only screen and (min-width: 600px) 
{ /*- - - - - - - - - - - - - - - DESKTOP-ON */
#pagina_3_parti {
  	flex-direction: row;
}
#sidebar_1_3 {
	width:20%;		
	order: 1;
	-webkit-order: 1;
}
#sidebar_2_3 {
	width:60%;		
	order: 2;
	-webkit-order: 2;
}
#sidebar_3_3 {
	width:20%;	
	order: 3;
	-webkit-order: 3;	
}
/* - - - - - - - - - - - - - - DESKTOP-OFF */ }
@media only screen and (max-width: 599px) 
{ /* - - - - - - - - - - - - - - - - -MOBILE-ON */
#pagina_3_parti {
  flex-direction: column;
}
#sidebar_1_3 , #sidebar_2_3, #sidebar_3_3 {
	width:100%!important;
	float:left;
}
#sidebar_1_3 {		
	order: 2;
	-webkit-order: 2;
}
#sidebar_2_3 {	
	order: 1;
	-webkit-order: 1;
}
#sidebar_3_3 {	
	order: 3;
	-webkit-order: 3;	
}
/* - - - - - - - - - - - - - - - -MOBILE-OFF */ }