How to span a Bootstrap column over 2 rows dynamically - html

Question

I need to span a col-md-6 div over 2 rows dynamically, i.e. only if a certain angular var is true.
If this var is false this div wont span over 2 rows.
All the questions I found about this topic didn't addressed the dynamic aspect.
Here are the two options, the div marked with X needs to change dynamically.
Option 1 when var is true
Option 2 when var is false
The html I have right now is this:
<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>

Answer 1

You can use bootstrap to dynamically adjust the width of any div by using .container-fluid or .row-fluid classes. It will automatically take the width of the container whenever the viewport or contents within it's parent change. But to dynamically adjust the height bootstrap won't help, you will have to write your own custom css.
The approach i have taken is to use flexbox css layout model. You can use this link to learn more about it.
Set the display property of the parent div to display:flex and flex-direction:column. This will display the child elements vertically. Now give flex property to each of the child divs in the ratio that you would like them to be displayed. For example i have used flex:1 to both childs. This will display them with equal heights.
Now apply the ng-if directive . When the bottom div gets removed from the DOM, the top div automatically fills up the parent container.
html:
<div ng-controller="MyCtrl">
<label>Show Y</label> <input type="checkbox" ng-model="checked" ng-init="checked=true">
<div class="container">
<div class="row-fluid">
<div class="col-xs-6">Hello</div>
<div class="col-xs-6 wrap">
<div class="top">X</div>
<div class="bottom" ng-if="checked">Y</div>
</div>
</div>
</div>
css:
.wrap{
background-color:#e3e;
height:40px;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.top{
background-color:#ccc;
flex:1;
}
.bottom{
background-color:#afc;
flex:1;
}
Here is a working fiddle.