Разместить в одну колонку

[marc]

Привет, у меня есть свёрстанный блок, но элементы(круги) не стоят друг под другом, как это исправить?

<section id="about">
        <div class="container">
            <div class="title">
                <h2>
                    About Us
                </h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur.
                </p>
            </div>
            <div class="timeline-holder">
                <div class="box">
                    <div class="left">
                        <h3>July 2018 <span>Our humble beginnings</span></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p>
                    </div>
                    <img src="img/about1.jpg" alt="" />
                </div>
                <div class="box">
                    <div class="right">
                        <h3>January 2018 <span>Our humble beginnings</span></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p></div>
                    <img src="img/about2.jpg" alt="" />
                </div>
                <div class="box">
                    <div class="left">
                        <h3>December 2018 <span>Our humble beginnings</span></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p></div>
                    <img src="img/about3.jpg" alt="" />
                </div>
                <div class="box">
                    <div class="right">
                        <h3>February 2019 <span>Our humble beginnings</span></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p></div>
                    <img src="img/about4.jpg" alt="" />
                </div>
            </div>
    </section>

.about{
    margin-top: 86px;
}
 
.timeline-holder {
  position: relative;
}
 
.box {
  display: flex;
  align-items: center;
  margin: 60px 0;
}
 
.box .left {
  flex: 1;
  padding: 0 20px;
}
 
.box .right {
    direction: rtl;
  flex: 1;
  padding: 0 20px;
}
 
.box:nth-child(even) { 
  margin-right: calc(50% - 75px);
}
 
.box:nth-child(odd) {  
  flex-direction: row-reverse;
  margin-left: calc(50% - 75px);

 

[Switch74]

ну как минимум img у вас не флекс было бы не плохо ему тоже вес какой-то установить
по вашей картинке я так понимаю у вас должно быть 3 колонки, добавьте еще пустые div которые будут занимать равное пространство по сравнению с заполненными блоками, тогда вашим картинкам некуда будет девать (при условии, что у них одинаковые размеры) и будут идти друг под другом ровно