интересное выравнивание flex

привет,как сделать такую штуку флексом? я новичок в фронте поетому наверное и не могу понять как это сделать. я пробовал многими способами,но не получалось(

вот мой код вроде 'типо работает' но я не уверен что правильно + при адаптации текст 'увеличивается' в ширину и все разбрасывается

    .content_wrap {
    display       : flex;
    flex-direction: column;

    .item__wrap {
        display       : flex;
        align-items   : center;
        padding-bottom: 90px;

        &:nth-child(odd) {
            flex-direction: row;
        }

        &:nth-child(even) {
            flex-direction: row-reverse;
        }

        .text__wrap {
            .data__time {
                font-family   : 'montserrat-bold';
                font-size     : 18px;
                color         : #222222;
                padding-bottom: 13px;
                text-transform: uppercase;
            }

            .about_project {
                font-family   : 'montserrat-bold';
                font-size     : 18px;
                letter-spacing: 0px;
                color         : #222222;
                font-weight   : 700;
                padding-bottom: 18px;
            }

            .about_info {
                font-family   : 'roboto-slab-regular';
                font-size     : 14px;
                letter-spacing: 0px;
                color         : #777777;
                font-weight   : 400;
            }
        }

        &:nth-child(odd) .text__wrap {
            text-align  : right;
            margin-right: 42px;
        }

        &:nth-child(even) .text__wrap {
            text-align : left;
            margin-left: 42px;
        }

        .img__rounded {
            width           : 168px;
            height          : 168px;
            border-radius   : 84px;
            background-color: #000000;
            border          : 7px solid #f1f1f1;
        }

        &:nth-child(odd) .img__rounded {
            margin-right: calc(50% - 50px);
        }

        &:nth-child(even) .img__rounded {
            margin-left: calc(43% - 50px);
        }
    }

    .item_server_wrap {
        display       : flex;
        flex-direction: column;
        padding-right : 55px;

        .server__wrap {
            display        : flex;
            justify-content: center;
        }

        .server__rounded {
            width           : 168px;
            height          : 168px;
            border-radius   : 84px;
            background-color: #fed136;
            border          : 7px solid #f1f1f1;
        }
    }
}

}