body {
	margin: 0;
	padding: 2em 0;
	font-family: 'Open Sans', sans-serif;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;

	background-color: #e6ecf0;

	font-size: 13pt;
	line-height: 15pt;
}

.container {
	display: flex;
	flex-direction: column-reverse;

	flex-wrap: wrap;
	align-content: space-between;
	justify-content: flex-end;
	/* Your container needs a fixed height, and it
	 * needs to be taller than your tallest column. */
	height: 800px;
	width: 60%;

	/* Optional */
	background-color: #f7f7f7;
	border-radius: 3px;
	padding: 20px;
	margin: 40px auto;
	counter-reset: items;
}

.item {
	width: 32%;
	/* Optional */
	position: relative;
	margin-bottom: 2%;
	border-radius: 3px;
	background-color: #a1cbfa;
	border: 1px solid #4290e2;
	box-shadow: 0 2px 2px rgba(0,90,250,0.05),
	0 4px 4px rgba(0,90,250,0.05),
	0 8px 8px rgba(0,90,250,0.05),
	0 16px 16px rgba(0,90,250,0.05);
	color: #fff;
	padding: 15px;
	box-sizing: border-box;
}

.item::before {
	counter-increment: items;
	content: "Секция #" counter(items);
}


.item:nth-child(3n+1) { order: 1; }
.item:nth-child(3n+2) { order: 2; }
.item:nth-child(3n)   { order: 3; }

.container::before,
.container::after {
	content: "";
	background: violet;
	flex-basis: 100%;
	width: 2px;
	order: 2;
}