<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;
	counter-reset: section ;
	margin:auto;
	max-width:120em;
}
.num::before {
	counter-increment: section ;  
	content:counter(section) ;
	position:absolute;
	display:block;
	margin:1.1em 0 0 .65em;
	width:2em;
	height:2em;
	font-weight:bold;
	font-size:3em;	
}
.num{
	width:10em;
	height:10em;
	float:left;
	text-align:center;
	color:#000;
	background:#b7dcfd;
	border-radius:50%;
}
.num:after{
	content:"";
	position:relative;
	float:right;
	margin:3.5em -1.5em 0 0;
	width:3em;
	height:3em;
	border:.4rem solid red;
	border-radius:50%;
}
.num12:after{display:none;}
/* colors*/
.num1{background:#b7dcfd;}
.num1:after{border-color:#b7dcfd;background:#74ccde}
.num2{background:#74ccde;}
.num2:after{border-color:#74ccde;background:#feffb1}
.num3{background:#feffb1;}
.num3:after{border-color:#feffb1;background:#fe8868}
.num4{background:#fe8868;}
.num4:after{border-color:#fe8868;background:#ec6798}
.num5{background:#ec6798;}
.num5:after{border-color:#ec6798;background:#dca8ec}
.num6{background:#dca8ec;}
.num6:after{border-color:#dca8ec;background:#ffdcab}
.num7{background:#ffdcab;}
.num7:after{border-color:#ffdcab;background:#cefede}
.num8{background:#cefede;}
.num8:after{border-color:#cefede;background:#ceb9aa}
.num9{background:#ceb9aa;}
.num9:after{border-color:#ceb9aa;background:#fea9cc}
.num10{background:#fea9cc;}
.num10:after{border-color:#fea9cc;background:#aaed8e}
.num11{background:#aaed8e;}
.num11:after{border-color:#aaed8e;background:#a8aaa7}
.num12{background:#a8aaa7;}
.num12:after{border-color:#74ccde;background:#feffb1}

@media screen and (max-width:121em){
	.num11:after{margin:8.5em 3.5em 0 0;}
	.num12{float:right}
	.wrap{width:110em;}
}
@media screen and (max-width:111em){
	.num10:after{margin:8.5em 3.5em 0 0;}
	.num11:after{margin:3.5em 0 0 -1.5em;float:left}
	.num11{float:right}
	.wrap{width:100em;}
}
@media screen and (max-width:101em){
	.num9:after{margin:8.5em 3.5em 0 0;}
	.num10:after{margin:3.5em 0 0 -1.5em;float:left}
	.num10{float:right}
	.wrap{width:90em;}
}
@media screen and (max-width:91em){
	.num8:after{margin:8.5em 3.5em 0 0;}
	.num9:after{margin:3.5em 0 0 -1.5em;float:left}
	.num9{float:right}
	.wrap{width:80em;}
}
@media screen and (max-width:81em){
	.num7:after{margin:8.5em 3.5em 0 0;}
	.num8:after{margin:3.5em 0 0 -1.5em;float:left}
	.num8{float:right}
	.wrap{width:70em;}
}
@media screen and (max-width:71em){
	.num6:after{margin:8.5em 3.5em 0 0;}
	.num7:after{margin:3.5em 0 0 -1.5em;float:left}
	.num7{float:right}
	.wrap{width:60em;}
}
@media screen and (max-width:61em){
	.num5:after{margin:8.5em 3.5em 0 0;}
	.num6:after{margin:3.5em 0 0 -1.5em;float:left}
	.num6{float:right}
	.num10:after{margin:8.5em 3.5em 0 0;float:right}
	.num11:after{margin:3.5em -1.5em 0 0;float:right}
	.num12,.num11{float:left}
	.wrap{width:50em;}
}
@media screen and (max-width:51em){
	.num4:after{margin:8.5em 3.5em 0 0;}
	.num5:after{margin:3.5em 0 0 -1.5em;float:left}
	.num5{float:right}
	.num8:after{margin:8.5em 3.5em 0 0;float:right}
	.num10:after,.num9:after{margin:3.5em -1.5em 0 0;float:right}
	.num10,.num9{float:left}
	.wrap{width:40em;}
}
@media screen and (max-width:41em){
	.num3:after{margin:8.5em 3.5em 0 0;}
	.num4:after,.num10:after,.num11:after{margin:3.5em 0 0 -1.5em;float:left}
	.num4{float:right}
	.num9:after,.num6:after{margin:8.5em 3.5em 0 0;float:right}
	.num8:after,.num7:after{margin:3.5em -1.5em 0 0;float:right}
	.num7,.num8,.num9{float:left}
	.num10,.num11,.num12{float:right}
	.wrap{width:30em;}
}
@media screen and (max-width:31em){
	.num:nth-child(even):after{margin:8.5em 3.5em 0 0;}
	.num{float:left}
	.num3,.num4,.num7,.num8,.num11,.num12{float:right}
	.num:nth-child(even):after{margin:8.5em 3.5em 0 0;float:right}	
	.num:nth-child(4n+3):after{margin:3.5em 0 0 -1.5em;float:left;}
	.num:nth-child(4n+5):after{margin:3.5em -1.5em 0 0;float:right;}		
	.wrap{width:20em;}
}
@media screen and (max-width:21em){
	.wrap .num:after{margin:8.5em 3.5em 0 0;float:right;}
	.num{float:left;}
	.wrap{width:10em;}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.