Bootstrap 4 中的 Flex 布局（排序？）答案

【问题标题】：Flex Layout (ordering?) in Bootstrap 4Bootstrap 4 中的 Flex 布局（排序？）
【发布时间】：2016-02-19 15:44:46
【问题描述】：

我正在学习引导程序。我使用绘画制作了我想尝试使用 Bootstrap 4 及其新的 flex 支持创建的内容的快速模型。我的问题出现在问题绘画草图中；由于 Flexbox 均衡了高度，因此 cmets 部分出现在相关部分的末尾下方。

我已经尝试将 cmets 部分放在内容列中，然后尝试重新排列代码中的 CSS flex 顺序，但顺序 CSS 规则似乎只在每一行中起作用（似乎无法从其他行）。

原码：

<div class="container">
<div class="row">

    <div class="col-md-8 content">
    <br>
        <h2 class='var-heading'>heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur ad ut purus rutrum, mattis neque non, ornare ipsum. Integer ipsum risus, fermentum vel fringilla et, blandit molestie tellus. Sed eu lobortis dolor. Integer enim leo, tristique ut ornare sed, tincidunt at mauris!</p>
        <div class="card">
        social media bar
        </div>
    </div>

    <div class="col-md-4 related">
        <div class="row">

            <div class="col-md-6">
                <div class="card card-inverse" style="background-color: #333; border-color: #333;">
                  <div class="card-block">
                    <p class="card-text">tag 1 longer tag</p>
                  </div>
                </div>
            </div>


            <div class="col-md-6">
                <div class="card card-inverse" style="background-color: #333; border-color: #333;">
                  <div class="card-block">
                    <p class="card-text">tag 2</p>
                  </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card card-inverse" style="background-color: #333; border-color: #333;">
                  <div class="card-block">
                    <p class="card-text">tag 3 longer tag</p>
                  </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card card-inverse" style="background-color: #333; border-color: #333;">
                  <div class="card-block">
                    <h4 class="card-title">tag 4 longer tag</h4>
                  </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card card-inverse" style="background-color: #333; border-color: #333;">
                  <div class="card-block">
                    <h4 class="card-title">tag 5</h4>
                  </div>
                </div>
            </div>
        </div>
    </div>

    <div class='col-md-2 comments'>
    commnents
    </div>

</div>
</div>

问题：

以下是理想的移动和桌面布局：

【问题讨论】：

你不能把 cmets 和 content 放到同一个col-md-8 div 中吗？
是的，我试过了。但是，如果您看到理想的移动图像，如果我将 cmets 放在原始 col-md-8 div 中，则无法在它们之间注入相关性。编辑：我可以使用 JS，只是不确定在 CSS/bootstrap 中是否可行。
根据stackoverflow.com/a/28682463/1596547，你不能使用弹性盒来做到这一点。另见stackoverflow.com/a/20978785/1596547 Bootstrap Card 模块也可以组织成 Masonry-like 列，见：可以组织成 Masonry-like 列

标签： html twitter-bootstrap flexbox twitter-bootstrap-4 bootstrap-4

【解决方案1】：

这可能不适合你，但这是我能想到的使用纯 CSS 的唯一方法。本质上：

@media (min-width: 600px) {
    .content {
        float: left;
        width: 50%;
    }

    .related {
        float: right;
        width: 50%;  
    }

    .comments {
        float: left;
        width: 50%;  
    }
}

不确定这将如何适应 Bootstrap，但希望您可以使用该概念来找出解决方案。 Full demo.

【讨论】：

感谢您的想法，但遗憾的是，浮动不适用于 flexbox。我认为解决方案可能只是 JS 根据媒体宽度更改列或完全转储 flexbox。

【解决方案2】：

我想做的事情在 flex 中是不可行的；以这种方式回答我的问题，以防其他人遇到类似问题。

我最终使用了一种不同的设计，在媒体查询中使用了一些“隐藏”来获得类似的效果。

【讨论】：

【解决方案3】：

使用最新的 Bootstrap 4 alpha 6，这种布局很容易。

   <div class="row d-block">
        <div class="col-md-8 float-left content">
            <div class="card card-block">
                <h3>Content</h3>
            </div>
        </div>
        <div class="col-md-4 float-right related">
            <div class="card card-block">
                <h3>Related</h3>
            </div>
        </div>
        <div class="col-md-8 float-left comments">
           <div class="card card-block">
               <h3>Comments</h3>
           </div>
        </div>
   </div>

http://www.codeply.com/go/UjirdJIabc

【讨论】：