css - Bootstrap 4 Div 订购问题

Question

我正在使用 Bootstrap 4，我一直在寻找解决我的订购问题的方法，但似乎无法找到正确的方法或在文件中找到一个。这是情况...

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

然后在移动设备上，布局应该是这样的:

Box 1 被赋予类“col-md-8”，Box 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>

Answer 1

这已经在类似的问题中得到了回答，例如:One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4

由于 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>

https://www.codeply.com/go/4HZq18NKln