第一个和第三个div作为.row中的列，第二个div位于Bootstrap 4 Flexbox后面

Question

如何使用Bootstrap 4使用flexbox显示此布局（所以我可以在桌面上拉伸装饰div和菜单div？）

我正在使用Bootstrap 3，但现在我正在使用Bootstrap 4这是我到目前为止所拥有的： https://codepen.io/anon/pen/RLMKxZ

    <div class="container-fluid"
    style="padding: 0; background-color: #001143; color: white;">
    <div class="row align-items-start">
        <div class="col-xs-12 col-sm-1 evento float-left"></div>
        <div id="triangulo_div" class="triangulo_div float-left">
            <p class="triangulo_rectangulo">triangulo rectangulo.</p>
        </div>
        <div class="col-xs-12 col-sm-3 float-left menu"
            style="background-color: #06184A;">
            <div class="menu_subdiv"></div>
            <div class="menu_subdivcont">
                <div style="text-align: left; vertical-align: middle;">
                    <div class="menu_link">
                        <a class="imghover" href=".php"><img
                            data-alt-src="../img/contacto2.png" src="../img/contacto.png">
                            1. Menu</a>
                    </div>
                    <div class="menu_link" style="background-color: #4FCCE8">
                        <a class="imghover" href="#"><img data-alt-src="../img/hotel.png"
                            src="../img/hotel2.png">2. Menu</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-3 float-left menu_siguiente"
            style="background-color: #06184A;">
            <div style="text-align: left; vertical-align: middle;">
                <div class="menu_link">
                    <a class="imghover" href="seleccionar_detalles.php"><img
                        data-alt-src="../img/habitaciones2.png"
                        src="../img/habitaciones.png"> 3. Menu</a>
                </div>
                <div class="menu_link">
                    <a class="imghover" href=".php"><img
                        data-alt-src="../img/resumen2.png" src="../img/resumen.png"> 4.
                        Menu</a>
                </div>
            </div>
            <div class="menu_siguiente_subdiv"></div>
        </div>
        <div class="col-sm-3 col-lg-5 float-md-right">
        </div>
        <div id="contenido"
            class="col-xs-24 col-sm-7 float-right contenido bck_div2">
            <div id="error">
                                        </div>
            <div class="formulario" style="min-height: 20em">
      <h1>Content</h1>
                </div>
        </div>

    </div>
</div>

的CSS：

.rwd-line {
    display: none;
}

.evento {
    display: block;
    min-height: 7em;
    background-image: url('img/imagen_horizontal.png');
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: 40%;
    background-size: 40%;
    clear: both;
    z-index: 5;
}

.atencion_cliente {
    background-color: #001143;
}

.triangulo_div {
    display: none;
}

.menu_link {
    width: 100vw;
    text-indent: 2.6em;
}

@media screen and (min-width: 576px) {
    .rwd-line {
        display: inline;
    }
    .menu_link {
        width: 100%;
    }
    .contenido {
        top: 6em;
        background-color: rgba(79, 204, 232, .9);
    }
    .triangulo_div {
        display: inline-block;
        position: relative;
        z-index: 5;
        pointer-events: none;
        padding: 0;
        width: 0;
    }
    .triangulo_rectangulo {
        width: 0;
        height: 0;
        text-indent: -9999px;
        border-top: calc(100vh - 75px) solid white;
        border-right: 4.8em solid transparent;
    }
    .menu_siguiente {
        float: left;
    }
    .menu {
        float: left;
        padding-right: 0;
    }
    .menu_subdiv {
        height: 6em;
        vertical-align: top;
    }
    .menu_subdivcont {
        vertical-align: bottom;
    }
    .menu_siguiente_subdiv {
        height: calc(100vh - 268px);
        float: left;
        padding-right: 0;
    }
    .evento {
        display: block;
        height: calc(100vh - 75px);
        background-image: url('img/imagen_vertical.png');
        background-position: center;
        background-position-y: 5em;
        background-repeat: no-repeat;
        -webkit-background-size: 60%;
        background-size: 60%;
    }
    .container {
        position: relative;
        margin-bottom: 0;
        padding-bottom: 0;
    }

}

@media screen and (max-width: 767px) {

    .menu, .menu_siguiente {
        padding-left: 0;
    }
}

@media screen and (min-width: 1500px) {
    .imghover {
        padding-left: 4em;
    }
}

@media screen and (min-width: 1800px) {
    .imghover {
        padding-left: 6em;
    }
}

.menu, .menu_siguiente a, a:hover {
    color: white;
}

body, html {
    height: 100% !important;
    padding: 0;
    margin: 0;
    background-color: #001143;
}

input, select {
    font-size: .9em !important;
}

.evento {
    background-color: white;
}

我尝试过其他方式，比如没有成功的flexbox，但我无法拉伸div

更新：这里是我尝试过的代码，但如果Content div较高且页面末尾有空格，则不会延长装饰和菜单div < / p>

我还更新了其他示例，因为我忘了添加带徽标的第一个div

https://codepen.io/anon/pen/jGzdwm