html Ejemplo Flexbox

Posted 2021-05-11

<div class="container"> 
	<section class="c1"> Section 1</section>
	<section class="c2"> Section 2</section>
	<section class="c3"> Section 3</section>
</div>

estilos.css

.container {
	display: flex;
	display: -webkit-flex;
	/* Tipo Fila */
	flex-flow: row wrap; 
	-webkit-flex-flow: row wrap;

}
/* Mobile First */
.c1, .c2, .c3 {
	width: 100%;
}

.c1 {
	height: 400px;	
}

.c2 {
	height: 400px;	
}

.c3 {
	height: 400px;	
}

/* Media queries */
@media (min-width: 500px) {
	.c1 {
		width: 70%;
		order: 2;
		-webkit-order: 2;
	}
	.c2 {
		width: 30%;
		order: 1;
		-webkit-order: 1;
		
	}
	.c3 {
		width: 100%;
		order: 3;
		-webkit-order: 3;
		
	}
}

@media (min-width: 800px) {
	.c2, .c3 {
		width: 25%;
	}
	.c1 {
		width: 50%;
	}
}