Question

I'm trying to display 3 cols in a different order and position, on display bigger or smaller then the "md" breakpoint.

On > md layout, the col "A" "B" should be one above the other, while the col "C" should be on the right of both of them.

On < md layout the col "A" should be 100% large, while the "B" and "C" should be on the same row.

I tried so far most of combination of bootsrap classes (for row and col), but haven't figured out how to reach this behaviour.

Attacched an image to better explain the question.

Answer 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的宽度和高度可能会根据您的要求而有所不同，因此请自行调整。

希望它将对很多人有帮助。

Bootstrap 4 change col position on differents sizes

1 个答案: