サイズが異なる２つの画像がある合計１０個の画像配置

今jimdoのウェブサイトをWordPressに引っ越す作業をしていますが、独特のギャラリーの使い方をされているので、苦労しています。
今回は、縦の画像のサイズが他の画像の２倍ある画像が２枚含まれていますので、通常のフレキシブルボックスで配置できず、試行錯誤していました。
最終的に縦に画像を配置するボックス要素を３つ横に並べる方法で、解決しました。

コードは、こちらです。
私は、WordPressのクラス名と競合することを防ぐために、接頭語を付けてクラス名を作っています。
接頭語は、適宜変えてください。

<style>
    /*  横に３ルの要素を並べる  */
    .it_container {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;

    }

    .it_container .it_row {
        width: calc(100%/3 -10px) !important;
        height: auto;
        margin: 5px;
        /* border: 1px solid #ccc; */
        text-align: center;
        padding: 5px;
    }

   /* 画像を縦に並べる　*/
    .it_flex_container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    .it_flex-item {
        width: 300px;
        height: auto;
        margin: 5px;
    }

</style>




<div class="it_container">
    <div class="it_row">
        <div class="it_flex-container">
            <div class="it_flex-item"><img src="hoge"></div>  <!-- 一段目  -->
            <div class="it_flex-item"><img src="hoge"></div> <!-- 2段目  -->
            <div class="it_flex-item"><img src="hoge"></div> <!-- 3段目  -->   
        </div>
    </div>
    <div class="it_row">    
        <div class="it_flex-container">
            <div class="it_flex-item"><img src="hoge"></div> <!-- 一段目  -->    
            <div class="it_flex-item"><img src="hoge"></div> <!-- 2段目  -->
            <div class="it_flex-item"><img src="hoge"></div> <!-- 3段目  -->
            <div class="it_flex-item"><img src="hoge"></div> <!-- 4段目  -->             
        </div>
    </div>
    <div class="it_row"> 
        <div class="it_flex-container">
            <div class="it_flex-item"><img src="hoge"></div> <!-- 一段目  -->
            <div class="it_flex-item"><img src="hoge"></div> <!-- 2段目  -->
            <div class="it_flex-item"><img src="hoge"></div> <!-- 3段目  -->               

        </div>
    </div>
</div>