Bootstrap 4 Div 排序问题答案

【问题标题】：Bootstrap 4 Div Ordering IssueBootstrap 4 Div 排序问题
【发布时间】：2018-12-04 14:48:00
【问题描述】：

我正在使用 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>

【问题讨论】：

请贴出你目前尝试过的代码

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

对于移动设备，请尝试使用小型媒体查询和网格类。比如 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;
}

对于排序，您可以使用 ordering 属性，这里是 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

希望对您有所帮助。

【讨论】：

【解决方案2】：

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style>
            h1 {
                color: #fff;
            }
            .left, .right {
                height: 800px;
            }
            .one {
                height: 500px;
                background-color: red;
            }
            .two {
                height: 100%;
                background-color: green;
            }
            .three {
                margin-top: 0.5em;
                height: 275px;
                background-color: blue;
            }
            @media screen and (max-width: 425px) {
                .two {
                    width: 50%;
                    position: absolute;
                    left: 25%;
                    top: -285px;
                }
                .three {
                    margin-top: 51em;
                }
            }
        </style>
    </head>
    <body>
            
        <div class="row p-0 m-0">
            <div class="left col-md-8 col-sm-12 p-2">
                <div class="row p-0 m-0">
                    <div class="one col-12"><h1>One</h1></div>
                    <div class="three col-12"><h1>Three</h1></div>
                </div>
            </div>
            <div class="right col-md-4 col-sm-12 p-2">
                <div class="two"><h1>Two</h1></div>
            </div>
        </div>
           
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.js"></script>
        <script>

        </script>
    </body>
</html>

【讨论】：

【解决方案3】：

这已经在类似的问题中得到了回答，例如：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

【讨论】：

使用上述稍微（稍微）修改的版本，我能够在桌面和移动设备上获得所需的布局。