Bootstrap 4 浮动与 Flex

Question

如何使用 Bootstrap 4 flex Grid 像这样浮动我的布局？一世

用弹性订单功能尝试过，但看看我的结果和问题

<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();

Answer 2

使用两个并排的列更容易实现这种布局。

有关工作示例，请参阅 https://codepen.io/caleyshemc/pen/mBWWRL。

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <div class="p-5" style="background: orange;">
        # LEFT 1
      </div>
      <div class="p-5" style="background: yellow;">
        # LEFT 2
      </div>
      <div class="p-5" style="background: lightgreen;">
        # LEFT 3
      </div>
    </div>

    <div class="col-sm-4">
      <div class="p-3" style="background: pink;">
        # RIGHT 1
      </div>
      <div class="p-3" style="background: grey;">
        # RIGHT 2
      </div>
      <div class="p-3" style="background: lightblue;">
        # RIGHT 3
      </div>
    </div>
  </div>
</div>

如果您绝对必须保持项目的顺序，那么这种布局对于 Flexbox 是不可能的。查看 JavaScript 网格布局库，例如 Masonry。