css - Bootstrap 4 Floating with Flex

Question

如何使用 Bootstrap 4 flex Grid 像这样 float 我的布局？我

尝试使用 flex order 函数，但看到了我的结果和问题

<div class="row align-items-start">

        <div class="col-sm-8 float-left" style="background: orange;order:1">
                <div class="white-container pt-5 pb-5">
                    # LEFT 1
                </div>
            </div>
            <div class="col-sm-4 float-right" style="background: pink;order:2">
                <div class="white-container pt-3 pb-3">
                    # RIGHT 1
                </div>
            </div>
            <div class="col-sm-4 float-right" style="background: grey;order:4">
                <div class="white-container pt-3 pb-3 ">
                    # RIGHT 2
                </div>
            </div>
            <div class="col-sm-8 float-left" style="background: yellow;order:3">
                <div class="white-container pt-5 pb-5">
                    # LEFT 2
                </div>
            </div>
            <div class="col-sm-8 float-left" style="background: yellow;order:5">
                <div class="white-container pt-5 pb-5">
                    LEFT 3
                </div>
            </div>
            <div class="col-sm-4 float-right" style="background: grey;order:6">
                <div class="white-container pt-3 pb-3">
                    RIGHT 3
                </div>
            </div>
        </div>

我的解决方案的问题是右列之间的空格。我希望在我放弃并使用 javascript 之前得到任何帮助:)

Answer 1

jQuery 解决方案:

var isMobileSorted = false;

$(window).resize(function() {
    if ($(window).width() < 768) {
        if(!isMobileSorted) {
            // sort mobile
            $("#widget").insertAfter($("#pictures"));
            $("#video").insertAfter($("#widget"));
            $("#reviews").insertAfter($("#contact"));
            isMobileSorted = true;
        }
    } else {
        if(isMobileSorted) {
            // resort desktop
            $("aside").prepend($("#widget"))
            $("#video").insertAfter($("#widget"));
            $("#reviews").insertAfter($("#video"));
            isMobileSorted = false;
        }
    }
}).resize();