style.css

@media screen and (min-width: 47rem) {
	#play {
		background: #edc900;
		width: 4rem;
		height: 4rem;
		font-size: 0;
		text-align: center;
		clear: left;
		float: left;
		cursor: pointer;
	}

	#title {
		background: #28e400;
		width: 43rem;
		height: 4rem;
		float: left;
		color: white;
		font-weight: bold;
	}

	#cover {
		width: 17rem;
		height: 17rem;
		float: left;
	}

	#cover img {
		width: 100%;
		height: 100%;
	}

	#logo {
		height: 17rem;
		width: 30rem;
		float: left;
	}

	#logo img {
		width: 100%;
		height: auto;
		margin-top: 1.2rem;
	}
}

@media screen and (max-width: 47rem) {
	#cover, #play, #title, #logo {
		width: 100%;
		display: block;
		text-align: center;
	}

	body {
		display: flex;
		flex-flow: column;
	}

	#logo {
		order: 1;
	}

	#logo img {
		height: auto;
		width: auto;
		max-width: 100%;
		max-height: 8rem;
	}

	#cover img {
		height: auto;
		width: auto;
		max-width: 100%;
		max-height: 17rem;
	}

	#cover {
		background: #edc900;
		order: 2;
	}

	#title {
		background: #28e400;
		height: 3rem;
		order: 3;
	}

	#play {
		height: 4rem;
		order: 4;
		background: #999;
	}
}

#logo, #cover {
	background: darkgrey;
}

#cover img[src=""] {
	display: none;
}