结构/定位 - 使用flex

Question

我尝试创建一个完全使用flex的结构，无需像添加CSS属性一样强制定位元素或使用JavaScript等工作。

以下是我尝试实现的内容，适用于桌面和平板电脑视图：

和移动视图：

我现在的结果是在桌面视图中：

此问题来自桌面视图。有一个间隙（草图中的灰色空间），我试图使用所有的flex属性将div 2放在底部，但没有结果。在下面的代码中，与之相关，你可以看到我评论了一个绝对的位置。它工作得很好，但我不想使用它，因为我只想用flex和它们的原生属性来实现目标。在这种情况下，像移动视图草图中的定位元素很容易。订单属性很好地工作;以下是相关代码：

// HTML：

<div class="main-container">
    <div class="elm-1">
        <p>elm-1</p>
    </div>  
    <div class="elm-2">
        <p>elm-2</p>
    </div>
    <div class="elm-3">
        <p>elm-3</p>
    </div> 
</div><!-- main container -->

// CSS：

* {
    box-sizing: border-box;  
}
.main-container {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    border: 2px solid tomato;
}
.main-container div:nth-of-type(1){
}
.main-container div:nth-of-type(2){
    /*position: absolute;
    bottom: 0;
    right: 0;*/ 
    min-height: 200px;
}
.elm-1 {
    width: 70%;
    min-height: 200px;
    border: 1px solid tomato;
}
.elm-2 {
    width: 30%;
    border: 1px solid tomato;
}
.elm-3 {
    width: 70%; 
    min-height: 150px;
    border: 1px solid tomato;
}
.elm-1, .elm-2, .elm-3 {
    padding: 10px;
    background-color: rgba(255, 0, 0, 0.3);
    border: 1px solid DarkSlateBlue;
}

/*---- MEDIA QUERIES -----*/
@media screen and (max-width: 500px){
    .elm-1 {
        order: 1;    
    }
    .elm-2 {
        order: 2;
    }
    .elm-3 {
        order: 3;
    }
    .elm-1, .elm-2, .elm-3 {
        width: 100%;
    }
}

/////

我尝试了另一种解决方案here。我终于实现了桌面/平板电脑视图，但问题来自移动视图。当移动视图出现时，不可能，只需使用flex，就可以按照自己的意愿对元素进行排序（将elm-2放在1和3之间）。在这个解决方案中，elm-1和2被包装在父容器中（这是使桌面视图正常工作的原因）。应该可以删除父节点，保留子节点并给它们具有适当顺序的CSS类，但我不想使用它。

我尝试将这两种解决方案结合起来但没有结果。

有什么想法吗？