html - Bootstrap 列を動的に 2 行にまたがる方法

Question

div を 2 行に動的にまたがる必要がありcol-md-6ます。つまり、特定の angular var が true の場合のみです。この var が false の場合、この div は 2 行にまたがりません。このトピックに関して私が見つけたすべての質問は、動的な側面に対処していませんでした。ここに 2 つのオプションがあります。X でマークされた div は動的に変更する必要があります。

var が true の場合のオプション 1

var が false の場合のオプション 2

私が今持っているhtmlはこれです：

<div class="container">

        <div class="col-md-7 col-lg-7">
            
            <div class="row">
                <p>text</p>
            </div>
            
            <div class="row">
                <p>text </p>
            </div>
        </div>

        <div class="col-md-5 col-lg-5">

            <div class="row">
                <div ng-class="show ? ['col-lg-6','col-md-6'] : ['col-lg-12','col-md-12']">
                    <p>text</p>
                </div>
                <div ng-if="show" class="col-md-6 col-lg-6">
                    <p>text</p>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 col-lg-6">
                    <p> text</p>
                </div>
                <div class="col-md-6 col-lg-6">
                    <p> text</p>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 col-lg-6">
                    <p>text</p>
                </div>
                <div ng-if="show">
                    <p>text</p>
                </div>
            </div>

        </div>

    </div>