<ol class="wrap">
  <li class="num num1"></li>
  <li class="num num2"></li>
  <li class="num num3"></li>
  <li class="num num4"></li>
  <li class="num num5"></li>
  <li class="num num6"></li>
  <li class="num num7"></li>
  <li class="num num8"></li>
  <li class="num num9"></li>
  <li class="num num10"></li>
  <li class="num num11"></li>
  <li class="num num12"></li>
</ol>
html,body {margin:0;padding:0;font-size:100%}
body{
	background:#67a968;
	box-sizing:border-box;
}
*,:after,:before{box-sizing:border-box;}
.wrap {
	margin:0;
	list-style:none;
	padding:0 3em;
	counter-reset: section ;
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	margin:auto;
}
.num::before {
	counter-increment: section ;  
	content:counter(section) ;
	position:absolute;
	display:block;
	margin:1.5em 0 0 1em;
	width:2em;
	height:2em;
	font-weight:bold;
	font-size:3em;	
}
.num{
	width:12em;
	height:12em;
	text-align:center;
	color:#000;
	background:#b7dcfd;
	border-radius:50%;
}
.num:after{
	content:"";
	position:relative;
	float:right;
	margin-right:-2em;
	margin-top:4em;
	width:4em;
	height:4em;
	border:.4rem solid red;
	border-radius:50%;
}
.num12:after{display:none;}


/* colors*/
.num1{background:#b7dcfd;order:1}
.num1:after{border-color:#b7dcfd;background:#74ccde}
.num2{background:#74ccde;order:2}
.num2:after{border-color:#74ccde;background:#feffb1}
.num3{background:#feffb1;order:3}
.num3:after{border-color:#feffb1;background:#fe8868}
.num4{background:#fe8868;order:4}
.num4:after{border-color:#fe8868;background:#ec6798}
.num5{background:#ec6798;order:5}
.num5:after{border-color:#ec6798;background:#dca8ec}
.num6{background:#dca8ec;order:6}
.num6:after{border-color:#dca8ec;background:#ffdcab}
.num7{background:#ffdcab;order:7}
.num7:after{border-color:#ffdcab;background:#cefede}
.num8{background:#cefede;order:8}
.num8:after{border-color:#cefede;background:#ceb9aa}
.num9{background:#ceb9aa;order:9}
.num9:after{border-color:#ceb9aa;background:#fea9cc}
.num10{background:#fea9cc;order:10}
.num10:after{border-color:#fea9cc;background:#aaed8e}
.num11{background:#aaed8e;order:11}
.num11:after{border-color:#aaed8e;background:#a8aaa7}
.num12{background:#a8aaa7;order:12}
.num12:after{border-color:#74ccde;background:#feffb1}



/* media queries*/
@media screen and (max-width:150em){
	.num11:after{margin:10em 4em 0 0;}
}
@media screen and (max-width:138em){
	.num10:after{margin:10em 4em 0 0;}
	.num11:after{margin:4em 0 0 -2em;float:left;}
	.num11{order:14;}
}
@media screen and (max-width:126em){
	.num9:after{margin:10em 4em 0 0;}
	.num10:after{margin:4em 0 0 -2em;float:left;}
	.num10{order:15;}
}
@media screen and (max-width:114em){
	.num8:after{margin:10em 4em 0 0;}
	.num9:after{margin:4em 0 0 -2em;float:left;}
	.num9{order:16;}
}
@media screen and (max-width:102em){
	.num7:after{margin:10em 4em 0 0;}
	.num8:after{margin:4em 0 0 -2em;float:left;}
	.num8{order:17;}
}
@media screen and (max-width:90em){
	.num6:after{margin:10em 4em 0 0;}
	.num7:after{margin:4em 0 0 -2em;float:left;}
	.num7{order:18;}
}
@media screen and (max-width:78em){
	.wrap {justify-content:flex-start;}
	.num5:after{margin:10em 4em 0 0;}
	.num6:after{margin:4em 0 0 -2em;float:left;}
	.num6{order:9;}
	.num7{order:8}
	.num8{order:7;}
	.num9{order:6}
	.num10{order:5}
	.num11{order:10}
	.num12{order:11}
	.num10:after{margin:10em 0 0 4em}
	.num11:after{float:right;margin-right:-2em}
}
@media screen and (max-width:66em){
	.num4:after{margin:10em 4em 0 0;}
	.num5:after{margin:4em 0 0 -2em;float:left;}
	.num8:after{margin:10em 4em 0 0;float:right}
	.num9:after,.num10:after{float:right;margin:4em -2em 0 0}
	.num5{order:9;}
	.num6{order:8}
	.num7{order:7;}
	.num8{order:6}
	.num9{order:10}
	.num10{order:11}
	.num11{order:12}
	.num12{order:13}
}
@media screen and (max-width:54em){
	.num3:after{margin:10em 4em 0 0;}
	.num4:after{margin:4em 0 0 -2em;float:left;}
	.num6:after,.num9:after{margin:10em 4em 0 0;float:right}
	.num7:after,.num8:after{margin:4em -2em 0 0;float:right;}
	.num10:after,.num11:after{margin:4em 0 0 -2em;float:left}
	.num4{order:6;}
	.num5{order:5}
	.num6{order:4;}
	.num7{order:7}
	.num8{order:8}
	.num9{order:9}
	.num10{order:13}
	.num11{order:12}
	.num12{order:11}	
}

@media screen and (max-width:43em){
	.wrap{width:36em;justify-content:center;}
	.num2:after{margin:10em 4em 0 0;}
	.num3:after{margin:4em 0 0 -2em;float:left;}
	.num:nth-child(even):after{margin:10em 4em 0 0;float:right}	
	.num:nth-child(4n+3):after{margin:4em 0 0 -2em;float:left;}
	.num:nth-child(4n+5):after{margin:4em -2em 0 0;float:right;}		
	.num3{order:4}
	.num4{order:3;}
	.num5{order:5}
	.num6{order:6;}
	.num7{order:8}
	.num8{order:7}
	.num9{order:9}
	.num10{order:10}
	.num11{order:12}
	.num12{order:11}
}
@media screen and (max-width:38em){
	.wrap{padding:0;flex-direction:column;margin:auto;width:12em;}
	.wrap .num:after{margin:10em 4em -2em 0;float:right}
	.num{order:0;display:block;}	
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.