様々なフロー(流れ)を記述する時に便利なタイムラインのコードです。
イメージとしてはこんな感じ→　デモ
色々弄ってカスタマイズしてみてください。

HTML(マークアップ)

<div class="menu-flow">
<div class="timeline">
<div class="timeline-item">
<p class="timeline-content"><span>01</span>テスト</p>
<p class="timeline-content-sp"><span>01</span>テスト</p>

</div>
<div class="timeline-item">
<p class="timeline-content"><span>02</span>テスト</p>
<p class="timeline-content-sp"><span>02</span>テスト</p>

</div>
<div class="timeline-item">
<p class="timeline-content"><span>03</span>テスト</p>
<p class="timeline-content-sp"><span>03</span>テスト</p>

</div>
<div class="timeline-item">
<p class="timeline-content"><span>04</span>テスト</p>
<p class="timeline-content-sp"><span>04</span>テスト</p>

</div>
<div class="timeline-item">
<p class="timeline-content"><span>05</span>テスト</p>
<p class="timeline-content-sp"><span>05</span>テスト</p>

</div>
<div class="timeline-item">
<p class="timeline-content"><span>06</span>テスト</p>
<p class="timeline-content-sp"><span>06</span>テスト</p>

</div>
<div class="timeline-item">
<p class="timeline-content"><span>07</span>テスト/p>
<p class="timeline-content-sp"><span>07</span>テスト</p>
</div>
</div>

CSS

.menu-flow {
width: 1000px;
height: auto;
padding: 50px 0;
}

.timeline-item {
position: relative;
border-left: 1px solid #000;
padding: 0px 0 40px 30px;
color:#333;
}

.timeline-item span {
writing-mode:horizontal-tb;
margin-bottom: 5px;
}

.timeline-content {
writing-mode: vertical-rl;
}

.timeline-content-sp {
display: none;
}
.timeline-item:before {
content: "";
display: block;
width: 25px;
height: 25px;
position: absolute;
left: 0;
top: 0;
border-radius: 100%;
background-color: #000;
transform: translateX(-50%) translateY(-50%);
}
.timeline-item:last-of-type {
padding-bottom: 0;
}
.timeline-item:last-of-type:before {
width: 0;
height: 0;
border-style: solid;
border-width: 10px 5px 0 5px;
border-color: #000000 transparent transparent transparent;
border-radius: 0;
background-color: transparent;
top: auto;
bottom: 0;
transform: translateX(-50%) translateY(0);
}

@media (max-width:768px) {
.timeline-content {
display: none;
}

.timeline-content-sp {
display: block;
text-align: left;
margin-left: 40px;
margin-bottom: 5px;
font-size: 13px;
}

.menu-flow h1 {
font-size: 20px;
color:#fff;
}

.timeline {
padding: 3rem 3rem;
}

.timeline-item:before {
top: -5px;
}

.menu-flow-text {
padding: 0px 40px;
}

.menu-flow-text p {
margin-bottom: 30px;
line-height: 27px;
font-size: 12px;
text-indent: -2em;
}

.menu-flow-text span {
font-size: 14px;
}

.timeline-item span {
writing-mode:horizontal-tb;
margin-bottom: 0px;
margin-right: 10px;
}

.timeline-item:before {
content: "";
display: block;
width: 23px;
height: 23px;
}

}

@media (min-width:768px) {
.timeline {
display: table;
table-layout: fixed;
width: 100%;
}
.timeline-item {
display: table-cell;
vertical-align: top;
padding: 0;
border-top: 1px solid #000;
border-bottom: 0;
border-left: 0;

}

.timeline-item:before {
top: 0px;
}

.timeline-item:last-of-type {
padding-bottom: 0;
text-align: right;
}
.timeline-item:last-of-type:before {
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent #000000;
top: 0;
right: 0;
bottom: auto;
left: auto;
transform: translateX(0) translateY(-50%);
}
.timeline-item:last-of-type p {
text-align: left;
}
.timeline-label, .timeline-content {
transform: translateX(-50%);
text-align: left;
display: block;
max-width: 70%;
}
.timeline-label {
text-align: center;
position: absolute;
top: 0;
left: 0;
transform: translateX(-50%) translateY(-120%);
}

.timeline-content-sp {
display: none;
}

.timeline-item span {
writing-mode:horizontal-tb;
margin-bottom: 10px;
margin-right: 0px;
}
.timeline-content {
margin-top: 30px;
}
.timeline-item:last-of-type .timeline-label, .timeline-item:last-of-type .timeline-content {
transform: translateX(50%);
text-align: left;
display: inline-block;
max-width: 70%;
}
.timeline-item:last-of-type .timeline-label {
left: auto;
right: 0;
transform: translateX(50%) translateY(-120%);
}
}

【参考サイト】
CSSだけでレスポンシブなタイムラインを作る – AGN Web!
此方のサイトを参考にしました。
Sassで記述されていたのでCSSに変換してカスタマイズを行いました。
 
制作フローだったり流れを表示するのにもってこいです。
自分の好みのスタイルに変更して是非使ってみてください！