iki van2

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" contents="width=device-width" initial-scale="1">

	<title>How can we rewrite the stars? Write it. stars stars s</title>
	<style>
	body,html, p{
		margin: 0;
		border:0;
		padding: 0;
	}
	@media (min-width:1200px){
		p{
			color:red;
			background-color:blue;
		}
		.flex-container{
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.boxbesar{
			background-color: red;
			width: 100%;
			height: 100px;

		}
		.boxkecil{

			background-color: green;
			border:solid;
			border-width: 1px;
			height: 100px;
			width: 100px;
		}

	}
	@media only screen and (max-width:1023px){
		p{
			color:green;
			background-color:black;

		}
		.flex-container{
			display: flex;
			flex-direction: column;
			align-items: center;
			/*align-content: center;*/
		}
		.boxbesar{
			background-color: red;
			width: 100%;
			height: 100px;
		}
		.boxkecil{

			background-color: green;
			border:solid;
			border-width: 1px;
			height: 100px;
			width: 100px;
			/*flex-grow: ;*/
		}
	}
	@media (min-width:0px) and (max-width:480px){
		p{
			color:green;
			background-color:black;
		}
		.flex-container{
			display: flex;
			flex-direction: column;
			align-items: center;
			/*align-content: center;*/
		}
		.boxbesar{
			background-color: red;
			width: 100%;
			height: 100px;
			display: none;
		}
		.boxkecil{

			background-color: green;
			border:solid;
			border-width: 1px;
			height: 100px;
			width: 100px;
			/*flex-grow: ;*/
		}

	}


	</style>
</head>
<body>
<p>Lalalalallala</p>
<div class="flex-container">
	<div class="boxbesar"></div>

</div>
<div class="flex-container">
	<div class="boxkecil"></div>
	<div class="boxkecil"></div>
	<div class="boxkecil"></div>
</div>
</body>
</html>