Bootstrap 4随Flex浮动

Question

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

​

我尝试过使用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();

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时不能使用此布局。查看Masonry等JavaScript网格布局库。