How to align the center of the circles along the line?

LmgID.png
And the text and the violet wand from item in item must alternately change the positions (top/bottom as it is now)
Link to the sandbox
Codepen

<ul class="mounting-phases">
 <li class="mounting-phases__item">
 <div class="mounting-phases__circle mounting-phases__circle--1"></div>
 <div class="mounting-phases__dash"></div>
 <div class="mounting-phases__text">Plan of land in accordance with the Executive scheme</div>
</li>
 <li class="mounting-phases__item">
 <div class="mounting-phases__circle mounting-phases__circle--2"></div>
 <div class="mounting-phases__dash"></div>
 <div class="mounting-phases__text">to Apply layout for all designs</div>
</li>
 <li class="mounting-phases__item">
 <div class="mounting-phases__circle mounting-phases__circle--3"></div>
 <div class="mounting-phases__dash"></div>
 <div class="mounting-phases__text">Make holes for installation of support poles</div>
</li>
 <li class="mounting-phases__item">
 <div class="mounting-phases__circle mounting-phases__circle--4"></div>
 <div class="mounting-phases__dash"></div>
 <div class="mounting-phases__text">first, tighten the crossbar with clamps at the desired height</div>
</li>
 <li class="mounting-phases__item">
 <div class="mounting-phases__circle mounting-phases__circle--5"></div>
 <div class="mounting-phases__dash"></div>
 <div class="mounting-phases__text">Set columns according to the drawings</div>
</li>
 <li class="mounting-phases__item">
 <div class="mounting-phases__circle mounting-phases__circle--6"></div>
 <div class="mounting-phases__dash"></div>
 <div class="mounting-phases__text">Put the pipe and the crossbar is strictly on the level</div>
</li>
 <li class="mounting-phases__item">
 <div class="mounting-phases__circle mounting-phases__circle--7"></div>
 <div class="mounting-phases__dash"></div>
 <div class="mounting-phases__text">Lock of the crossbar, tightening the bolts in the clamps</div>
</li>
 <li class="mounting-phases__item">
 <div class="mounting-phases__circle mounting-phases__circle--8"></div>
 <div class="mounting-phases__dash"></div>
 <div class="mounting-phases__text">When all placed in the level and stretched out to pour concrete and check again vertical</div>
</li>
 <li class="mounting-phases__item">
 <div class="mounting-phases__circle mounting-phases__circle--9"></div>
 <div class="mounting-phases__dash"></div>
 <div class="mounting-phases__text">to Wash the traces of concrete from columns in three hours</div>
</li>
 <li class="mounting-phases__item">
 <div class="mounting-phases__circle mounting-phases__circle--10"></div>
 <div class="mounting-phases__dash"></div>
 <div class="mounting-phases__text">the final broach all clamps after 24 hours</div>
</li>
 </ul>


.mounting-phases {
 background: #2dbf80;
 padding: 0;
 margin: 0;
 display: flex;
 justify-content: center;
}
.mounting-phases__item {
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 align-items: center;
 width: 188px;
}
.mounting-phases__item:nth-child(2n) {
 flex-direction: column-reverse;
 justify-content: flex-start;
}
.mounting-phases__dash {
 width: 3px;
 height: 45px;
 background-color: purple;
}
.mounting-phases__text {
 color: #000;
 font-size: 14px;
}
.mounting-phases__circle {
 width: 75px;
 height: 75px;
 border: 1px solid #fff;
 border-radius: 50%;
 position: relative;
 overflow: hidden;
}
.mounting-phases__circle:before {
 content: ";
 width: 65px;
 height: 65px;
 position: absolute;
 background: url(http://via.placeholder.com/65x65) no-repeat center/contain;
 border-radius: 50%;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
June 7th 19 at 15:36
1 answer
June 7th 19 at 15:38
If "quick to work, what is" it is possible so:
https://codepen.io/elijah_tr/pen/bLxoxN

Find more questions by tags FlexboxHTMLCSSLayoutFrontend