Css 引导程序4分区订购问题

我正在使用Bootstrap4，我一直在寻找解决我的订购问题的方法，但似乎没有找到正确的方法，也没有在档案中找到。情况是这样的

在桌面上，我需要以下布局：

然后在移动设备上，布局应如下所示：

框1为“col-md-8”，框2为“col-md-4”。但就我个人而言，我不知道如何正确地放置Box 3（或正确的类）以使其在两种布局中都正确显示。有人有什么想法吗

我提前感谢你的帮助

编辑（2018/6/26）： 下面是有效的结果代码：

<main id="body" role="maincontent">
    <div class="container">
        <h1>Page Title</h1>
        <div class="row d-flex d-md-block clearfix">
            <div class="col-md-8 main_content float-left">
                <p>Lorem ipsum dolor sit amet</p>
            </div>
            <div class="col-md-4 highlight float-right">
                <p>Second Item</p>
            </div>
            <div class="col-md-4 float-left">
                <p>Lorem ipsum dolor sit amet</p>
            </div>
        </div>
    </div>
</main>

页面标题
Lorem ipsum dolor sit amet

第二项

Lorem ipsum dolor sit amet

对于移动设备，请尝试使用媒体查询和小型网格类。例如，box1 col-sm-4您可以参考本指南

对于排序，您可以使用ordering属性，这里是mdn ref

你可以参考这篇文章

---

希望这对你有帮助

基于谷歌Chrome，假设手机屏幕宽度为425px。复制并粘贴代码，然后在浏览器中打开以查看实际结果

页面标题
h1{
颜色：#fff；
}
.左，.右{
高度：800px；
}
.一{
高度：500px；
背景色：红色；
}
.二{
身高：100%；
背景颜色：绿色；
}
.三{
边缘顶部：0.5em；
高度：275px；
背景颜色：蓝色；
}
@媒体屏幕和屏幕（最大宽度：425px）{
.二{
宽度：50%；
位置：绝对位置；
左：25%；
顶部：-285px；
}
.三{
边缘顶端：51em；
}
}
一个
三
两个

类似的问题已经回答了这个问题，例如：

由于BS4使用flexbox，请使用

d-md-block

禁用flexbox，并使用

float-

使第二列在

md

屏幕上向右拉

<div class="container">
    <div class="row d-flex d-md-block">
        <div class="col-md-8 float-left">
            1
        </div>
        <div class="col-md-4 float-right">
            2
        </div>
        <div class="col-md-8">
            3
        </div>
    </div>
</div>

1.
2.
3.

---

请发布您迄今为止尝试过的代码。使用上面稍微（稍微）修改的版本，我可以在桌面和手机上获得所需的布局。

<div class="container">
    <div class="row d-flex d-md-block">
        <div class="col-md-8 float-left">
            1
        </div>
        <div class="col-md-4 float-right">
            2
        </div>
        <div class="col-md-8">
            3
        </div>
    </div>
</div>