Flex Layout (ordering?) in Bootstrap 4

Question

I'm learning bootstrap. I used paint to make a quick mockup of what I want to try to create with Bootstrap 4 and its new flex support. My issue is seen in the problem paint sketch; since Flexbox equalizes height, the comments section is appearing below the end of the Related section.

I've already tried putting the comments section within the content column and then attempted rearranging the CSS flex order in the code, but the order CSS rules only appear to work within each row (doesn't seem possible to insert things from other rows).

Original code:

<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>

The problem:

Below are the ideal mobile and desktop layout:

Answer 1

This might not work for you but this is the only way I can think of doing it using purely css. Essentially:

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

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

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

Not sure how this will fit in with Bootstrap but hopefully you can use the concept to figure out a solution. Full demo.