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

Question

我正在学习 bootstrap。我使用 paint 快速制作了一个我想用 Bootstrap 4 及其新的 flex 支持创建的模型。我的问题出现在问题绘画草图中；由于 Flexbox 等高，评论部分出现在相关部分末尾的下方。

我已经尝试将评论部分放在内容列中，然后尝试重新排列代码中的 CSS 弹性顺序，但顺序 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>

问题：

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

Answer 1

这可能对你不起作用，但这是我能想到的唯一使用纯粹 css 的方法。本质上：

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

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

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

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

Answer 2

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

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

Answer 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

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

Flex Layout (ordering?) in Bootstrap 4

html

flexbox

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4