Responsive Grid

HTML

<section class="container">
	<div class="box">
		<h1>This is the first box</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci voluptates, aut totam eaque possimus molestiae atque odio vero optio porro magni, quis culpa ea. Perferendis, neque, enim. Rem, quia, quisquam.</p>
	</div>
	
	<div class="box">
		<h1>This is the second box</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci voluptates, aut totam eaque possimus molestiae atque odio vero optio porro magni, quis culpa ea. Perferendis, neque, enim. Rem, quia, quisquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit excepturi omnis inventore impedit ratione vel, porro fuga sint non minima neque natus eum deserunt doloribus ea quos laudantium suscipit, placeat.</p>
	</div>
	<div class="box">
		<h1>This is the third box</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci voluptates, aut totam eaque possimus molestiae atque odio vero optio porro magni, quis culpa ea. Perferendis, neque, enim. Rem, quia, quisquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit excepturi omnis inventore impedit ratione vel, porro fuga sint non minima neque natus eum deserunt doloribus ea quos laudantium suscipit, placeat.</p>
	</div>
	<div class="box">
		<h1>This is the s box</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci voluptates, aut totam eaque possimus molestiae atque odio vero optio porro magni, quis culpa ea. Perferendis, neque, enim. Rem, quia, quisquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit excepturi omnis inventore impedit ratione vel, porro fuga sint non minima neque natus eum deserunt doloribus ea quos laudantium suscipit, placeat.</p>
	</div>
  	<div class="box">
		<h1>This is the fifth box</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci voluptates, aut totam eaque possimus molestiae atque odio vero...

CSS

.container{
	display:flex;
	flex-flow: row wrap;
  justify-content: flex-start;
  margin: 0 auto;
  border: 1px solid red;
}
.container:after {
  content: "";
  flex: auto;
}
.box{
	width:100%;
	max-width:30%;
	border:1px solid red;
	margin:5px;
}
@media only screen and ( max-width:768px ){
	
	.box{
		width:100%;
		max-width:40%;
		border:1px solid red;
	}
}