如何使用flex來對齊我的節，以便頁腳節(4)在不改變div布局的情況下使用第2節下的空閑空間。

.flex-container {
    display: flex;
    flex-flow: row wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

.flex-item {
    background: tomato;
    padding: 5px;
    margin-top: 10px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}

.headerEl {
    background: red;
    width: 100%;
    height: 50px;
    order:1;
}

.footerEl {
    background: green;
    width: 100%; 
    height: 50px;
    order:4;
}

.main1El {
    background: blue;
    width: 50%;
    height: 100px;
    order:2
}

.main2El {
    background: blue;
    width: 50%;
    height: 150px;
    order:3
}

header{
    width:100%;
    display: flex;
}
footer{
    width: 50%;
    display: flex;
}
main{
    width: 100%;
    display: flex;
}

<div class="flex-container">
        <header>
            <div class="flex-item headerEl">1</div>
        </header>
        <main>
            <div class="flex-item main1El">2</div>
            <div class="flex-item main2El">3</div>
        </main>
        <footer>
            <div class="flex-item footerEl">4</div>
        </footer>
    </div>