Html 桌面上一个高的div与两个短的div相邻，并用Bootstrap 4堆叠在手机上

这与这个问题相似，但略有不同

我想在手机上重新订购三个div，并将它们并排放在桌面上。请参见所附的所需结果的图片：

我在描述这一点时遇到了很多困难，所以我希望这些图片能有所帮助

编辑： 下面是一个通过复制代码来工作的代码片段：

const Main=（）=>(
步骤2
标题2
步骤2
标题2
一些段落文本

)
ReactDOM.render(
,
document.getElementById（“react”）
);
img{
高度：自动；
宽度：100%；
}
对于较大的宽度，必须禁用flexbox，因为Bootstrap 4的flexbox使列具有相同的高度。然后，使用浮动，使B&C柱自然向右拉，因为A更高。flexbox
order-
将用于在mobile上重新订购COL

A-B-C桌面，B-A-C移动

<div class="container-fluid">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-6 order-1 float-left">
            A
        </div>
        <div class="col-lg-6 order-0 float-left">
            B
        </div>
        <div class="col-lg-6 order-1 float-left">
            C
        </div>
    </div>
</div>


A.
B
C

相关的：