Hola estoy intentando hacer una pagina responsive.Tengo un contenedor con 5 divs, en la vista movil muestro uno debajo del otro. Lo que no me sale es cuando la pantalla es mayor o igual a 600px, quiero que el div 1 ocupe el 100% y los demas ocupen solo el 50% del ancho. De forma que se vea 1 div arriba, y abajo 2 div uno al lado del otro por cada fila. Pero no consigo que los div se muestren uno al lado del otro. Esto es lo que tengo hecho.
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
border: solid red 1px;
width: 800px;
}
.columna1,
.columna2,
.columna3,
.columna4,
.columna5 {
width: 100%;
border: solid red 1px;
margin: 10px;
background-color: green;
}
@media (min-width: 600px) {
.columna2,
.columna3,
.columna4,
.columna5 {
width: 50%;
background-color: red;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Responsive design</title>
<link rel="stylesheet" type="text/css" href="theme2.css">
</head>
<body>
<div class="container">
<section class="columna1">Sección 1</section>
<section class="columna2">Sección 2</section>
<section class="columna3">Sección 3</section>
<section class="columna4">Sección 4</section>
<section class="columna5">Sección 5</section>
</div>
</body>
</html>