css 記述の直し方レイアウトの整え方

初心者アイコンの付け方にいま気が付きましたのでつけてみました！

どうやって質問したら伝わるのかわかりませんが
タイトルにあるような「css 直し方」だったり「css 一箇所　修正」などでggってみましたが
わからなかった為質問します。

前提・実現したいこと

スマホでみたときにレイアウトがおかしい、直したいです。

　Aさん画像(年・Aさん・所属)
◯◯◯◯◯◯◯◯◯Bさん画像(年・Bさん・所属)
Cさん画像(年・Cさん・所属)
◯◯◯◯◯◯◯◯◯Dさん画像(年・Dさん・所属)

というふうに並べたい。
◯はスペースなので無視して下さい。

発生している問題・エラーメッセージ

Aさん画像(年・Aさん・所属)
◯◯◯◯◯◯◯◯Bさん画像(年・Bさん・所属)
◯◯◯◯◯◯◯◯◯◯◯◯◯Cさん画像
(年・Cさん・所属)
Dさん画像(年・Dさん・所属)

となってしまっています・・・。

該当のソースコード

HTML
1	<div class="wrap_catch_profile">
2		<div class="box_employee_ct inner">
3			<div class="employee_ct">
4				<div class="img_ct"><img src="<?php echo $tmp_url; ?>images/pages/05.png" alt=""></div>
5				<div class="year_ct">2015年</div>
6				<div class="name_ct">Aさん</div>
7				<div class="department_ct">人事</div></p>
8			</div>
9			<div class="employee_ct">
10				<div class="img_ct"><img src="<?php echo $tmp_url; ?>images/pages/02.png" alt=""></div>
11				<div class="year_ct">2015年</div>
12				<div class="name_ct">Bさん</div>
13				<div class="department_ct">総務</div></p>
14			</div>
15			<div class="employee_ct">
16				<div class="img_ct"><img src="<?php echo $tmp_url; ?>images/pages/03.png" alt=""></div>
17				<div class="year_ct">2017年</div>
18				<div class="name_ct">Cさん</div>
19				<div class="department_ct">事務</div></p>
20			</div>
21			<div class="employee_ct">
22				<div class="img_ct"><img src="<?php echo $tmp_url; ?>images/pages/04.png" alt=""></div>
23				<div class="year_ct">2018年</div>
24				<div class="name_ct">Dさん</div>
25				<div class="department_ct">営業</div></p>
26			</div>
27		</div>

CSS
1  #crosstalk .mv_ct .mv_ph {
2    display: flex; }
3    #crosstalk .mv_ct .mv_ph li {
4      flex: 1; }
5      #crosstalk .mv_ct .mv_ph li img {
6        width: 100%;
7        height: 100%;
8        min-height: 540px;
9        z-index: 1; }
10    @media only screen and (max-width: 750px) {
11      #crosstalk .mv_ct .mv_ph li img {
12        min-height: 280px; } }
13#crosstalk .wrap_catch_profile {
14  background: #f8fafe;
15  padding: 0 0 64px; }
16  @media only screen and (max-width: 480px) {
17    #crosstalk .wrap_catch_profile {
18      padding: 0 0 40px; } }
19#crosstalk .box_employee_ct {
20  background: url(../images/common/bg_dot.png) repeat;
21  display: flex;
22  width: 90%;
23  justify-content: center;
24  padding: 40px 20px;
25  margin-top: -72px;
26  z-index: 1;
27  position: relative; }
28  #crosstalk .box_employee_ct .employee_ct {
29    text-align: center;
30    padding-right: 140px;
31    position: relative; }
32    #crosstalk .box_employee_ct .employee_ct:after {
33      content: "";
34      display: block;
35      width: 72px;
36      height: 72px;
37      background: url(../images/pages/icon_cross.png) no-repeat;
38      background-size: contain;
39      background-position: center;
40      position: absolute;
41      right: 12%;
42      top: 50%;
43      margin-top: -36px; }
44    #crosstalk .box_employee_ct .employee_ct:last-of-type {
45      padding-right: 0 !important; }
46      #crosstalk .box_employee_ct .employee_ct:last-of-type:after {
47        display: none !important; }
48    #crosstalk .box_employee_ct .employee_ct .img_ct {
49      margin-bottom: 10px; }
50    #crosstalk .box_employee_ct .employee_ct .year_ct {
51      color: #d2a710;
52      font-size: 15px; }
53    #crosstalk .box_employee_ct .employee_ct .name_ct {
54      color: #d2a710;
55      font-size: 32px;
56      letter-spacing: 1px;
57      margin-bottom: 8px; }
58    #crosstalk .box_employee_ct .employee_ct .department_ct {
59      font-size: 14px; }
60  @media only screen and (max-width: 1200px) {
61    #crosstalk .box_employee_ct {
62      padding: 20px; }
63      #crosstalk .box_employee_ct .employee_ct {
64        padding-right: 80px; }
65        #crosstalk .box_employee_ct .employee_ct:after {
66          width: 56px;
67          right: 6%; } }
68  @media only screen and (max-width: 750px) {
69    #crosstalk .box_employee_ct {
70      margin-top: -40px; }
71      #crosstalk .box_employee_ct .employee_ct {
72        padding-right: 50px; }
73        #crosstalk .box_employee_ct .employee_ct:after {
74          width: 32px;
75          right: 6%; }
76        #crosstalk .box_employee_ct .employee_ct .img_ct img {
77          width: 72px; }
78        #crosstalk .year_ct{
79          font-size: 10px; }
80        #crosstalk .box_employee_ct .employee_ct .year_ct {
81          font-size: 12px; }
82        #crosstalk .box_employee_ct .employee_ct .name_ct {
83          font-size: 18px;
84          margin-bottom: 2px; }
85        #crosstalk .box_employee_ct .employee_ct .department_ct {
86          font-size: 10px; } }
87  @media only screen and (max-width: 480px) {
88    #crosstalk .box_employee_ct {
89      padding: 20px 20px;
90      display: block; }
91      #crosstalk .box_employee_ct .employee_ct {
92        padding: 0;
93        flex-basis: 47%;
94        margin-bottom: 10px;
95        border-bottom: 1px solid #eee;
96        padding-bottom: 10px;
97        text-align: left; }
98        #crosstalk .box_employee_ct .employee_ct:last-of-type {
99          border-bottom: 0;
100          padding-bottom: 0;
101          margin-bottom: 0; }
102        #crosstalk .box_employee_ct .employee_ct:after {
103          display: none; }
104        #crosstalk .box_employee_ct .employee_ct .img_ct {
105          float: left;
106          margin-right: 20px; } }
107

試したこと

空間が折り返されてる？のかと思い、nowrapを記述してみました・
→余計おかしくなりました・・・。

補足情報（FW/ツールのバージョンなど）

WordPress 5.0.4 (shinetsu-child テーマ)

わかりづらいとは思いますが、まるまるサイトを載せるわけにもいかず・・・。
説明が不足している！などありましたらご指摘いただけると助かります！
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

clearfix なんですが、.employee_ct::after が消されちゃっているので注意。

CSS
1@media only screen and (max-width: 480px) {
2  #crosstalk .box_employee_ct .employee_ct .department_ct::after {
3    content: '';
4    display: block;
5    clear: both;
6  }
7}