Question

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

在台式机上，我需要以下布局：

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

框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>

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

Answer 2

对于移动设备，请尝试使用较小的媒体查询和网格类。例如，box1 col-sm-4您可以参考本指南https://getbootstrap.com/docs/4.0/layout/grid/

`something {
padding: 5px;
@include media-breakpoint-up(sm) { 
    padding: 20px;
}
@include media-breakpoint-up(md) { 
    padding: 40px;
}

要订购，您可以使用订购属性，这是mdn ref https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

您可以参考此帖子Using media breakpoints in Bootstrap 4-alpha

希望对您有所帮助。

Answer 3

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

function

Bootstrap 4 Div订购问题

3 个答案: