style.css

/* css document */
*{
box-sizing: border-box;	
}
h1{
margin-bottom:15px;
text-align:center;	
}

body{
margin:0px;
}
#d1, #d2,#d3{
position:relative;
border: 1px solid black;
float:left;
height:250px;
overflow:hidden;
}
p{
position:absolute;
top:15%;
}
#t1,#t2,#t3{
border: 1px solid black;
position:absolute;
right: 0px;
top: 0px;
height:20%;
width:40%;
text-align:center;
}

#t1{
background-color:pink;
}
#t2{
background-color:red;
}
#t3{
background-color:orange;
}
@media(min-width:992px){
.row{
width:100%;
height:300px;
}
.d1-pc, .d2-pc, .d3-pc{
width:30%;
}
.d1-pc{
background-color:green;
margin-left:2.5%;
margin-right:2.5%;
}	
.d2-pc{
background-color:yellow;
margin-right:2.5%;
}	
.d3-pc{
background-color:blue;
}
	
}

@media(min-width:768px) and (max-width:991px){
.row{
padding:5%;
width:100%;
height:400px;
margin-bottom:5%;
}	
.d1-tb{
background-color:green;
width:47.5%;
margin-right:5%;
}
.d2-tb{
background-color:yellow;
width:47.5%;
}
.d3-tb{
background-color:blue;
margin-top:5%;
width:100%;
}	
}

@media(max-width:767px){
.row{
padding:5%;
width:100%;
margin-bottom:5%;
}	
.d1-cl{
background-color:green;
width:100%;
}
.d2-cl{
background-color:yellow;
margin-top:5%;
width:100%;
}
.d3-cl{
background-color:blue;
margin-top:5%;
width:100%;		
}
}