Bootstrap 4改变不同尺寸的col位置答案

【问题标题】：Bootstrap 4 change col position on differents sizesBootstrap 4改变不同尺寸的col位置
【发布时间】：2019-06-02 04:56:36
【问题描述】：

我正在尝试以不同的顺序和位置显示 3 个列，显示大于或小于“md”断点。

在 > md 布局中，col "A" "B" 应该在一个之上，而 col "C" 应该在两者的右侧。

在

到目前为止，我尝试了大多数 bootsrap 类的组合（用于 row 和 col），但还没有弄清楚如何达到这种行为。

附上一张图片以更好地解释问题。

【问题讨论】：

我不认为你可以 - 第一个需要 a 和 b 在他们自己的 div 中（这意味着你不能用相同的 html 做第二个）或者你会需要知道 div 的高度（意味着它可能无法响应）
@Pete 这就是我所害怕的......我宁愿避免复制两个 div 之一，但现在似乎是唯一的方法
你可以尝试使用一点js来移动它，但这似乎有点脏。使用 css 网格怎么样 - 我认为你可以用它和一些媒体查询做一些事情，但我还没有学会它所以不知道
高度怎么样，这是全面屏设计吗？或者您期望高度相对于元素所具有的内容而增加？
div 没有固定的高度，它们会随着内容的变化而变化。

标签： html css bootstrap-4 responsive

【解决方案1】：

使用 Bootstrap 4 做这样的事情...

.border-div {
    margin: 5px;
    border: 4px solid;
    min-height: 100px;
}

.c-div-block {
    max-width: calc(100% - 10px);
    max-height: calc(100% - 25px);
}

.border-div.normal-span {
    line-height: 100px;
}

.border-div.expanded-span {
    line-height: 200px;
}

<!DOCTYPE HTML>
<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>

</head>

<body>

    <div class="container-fluid my-5">
        <div class="row no-gutters position-relative py-2">
            <div class="col-12 col-md-9 order-first order-md-first">
                <div class="border-div border-dark text-center normal-span">A</div>
            </div>
            <div class="col-6 col-md-9 order-2 order-md-last">
                <div class="border-div border-danger text-center normal-span">B</div>
            </div>
            <div class="position-absolute offset-md-9 col-md-3 order-md-2 h-100 d-none d-md-block">
                <div class="border-div border-success h-100 c-div-block text-center expanded-span">C</div>
            </div>
            <div class="col-6 order-last d-block d-md-none">
                <div class="border-div border-success text-center normal-span">C</div>
            </div>
        </div>
    </div>

</body>

</html>

注意：div的宽度和高度可能会根据您的要求而有所不同，请自行调整。

希望对很多人有所帮助。

【讨论】：

我也在考虑这样的事情，但他将不得不定义 C column 的内部 html 标记两次（不使用 javascript 或 jquery）。
当然，也可以使用JS，逻辑可能因人而异，所以我尝试仅使用Bootstrap和CSS。
我现在使用的解决方案非常相似，但没有自定义 css 或 javascript 代码。我仍然没有写它，因为我发现它不是一个干净的解决方案，但我不得不复制 A 和 B 下方的 C div 并将它们全部放在一行中，它隐藏在 >= md 布局（在
哦，那是因为不同div的高度不固定！