<div id="flexbox">
	<input type="radio" id="hoge1" name="hoge">
	<div>
		<label for="hoge1">
			<p>hoge1</p>
			<p class="hidden">Happy</p>
	</label>
	</div>
	<input type="radio" id="hoge2" name="hoge">
	<div>
		<label for="hoge2">
			<p>hoge2</p>
			<p class="hidden">New</p>
		</label>
	</div>
	<input type="radio" id="hoge3" name="hoge">
	<div>
		<label for="hoge3">
			<p>hoge3</p>
			<p class="hidden">Year !!</p>
		</label>
	</div>
</div>
*{
	-webkit-transition:all ease .4s;
	transition:all ease .4s;
}
input{
	display: none;
}
label{
  cursor:pointer;
}
#flexbox{
	display: -webkit-box;
	display: flex;
	-webkit-box-pack: justify;
	        justify-content: space-between;
	flex-wrap: wrap;
}
#flexbox div{
	width:30%;
	-webkit-box-ordinal-group:3;
	        order:2;
	background-color:khaki;
	text-align: center;
}
#flexbox div:nth-of-type(2) { background-color:pink}
#flexbox div:nth-of-type(3) { background-color:lime}

p.hidden{
	display:none;
  font-size:2em;
  font-weight:bold;
  color:tomato;
}

#hoge1:checked + div{ width:100%;-webkit-box-ordinal-group:2;order:1}
#hoge2:checked + div{ width:100%;-webkit-box-ordinal-group:2;order:1}
#hoge3:checked + div{ width:100%;-webkit-box-ordinal-group:2;order:1}

#hoge1:checked + div p.hidden{ display:block;}
#hoge2:checked + div p.hidden{ display:block;}
#hoge3:checked + div p.hidden{ display:block;}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.