title: How to span a Bootstrap column over 2 rows dynamically
body: <p>I need to span a <code>col-md-6</code> 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.</p>
  
  <p><a href="http://i.stack.imgur.com/UgqKw.gif" rel="nofollow">Option 1 when var is true</a></p>
  
  <p><a href="http://i.stack.imgur.com/8nusk.gif" rel="nofollow">Option 2 when var is false</a></p>
  
  <p>The html I have right now is this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
          &lt;div class="col-md-7 col-lg-7"&gt;
              
              &lt;div class="row"&gt;
                  &lt;p&gt;text&lt;/p&gt;
              &lt;/div&gt;
              
              &lt;div class="row"&gt;
                  &lt;p&gt;text &lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-5 col-lg-5"&gt;
  
              &lt;div class="row"&gt;
                  &lt;div ng-class="show ? ['col-lg-6','col-md-6'] : ['col-lg-12','col-md-12']"&gt;
                      &lt;p&gt;text&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div ng-if="show" class="col-md-6 col-lg-6"&gt;
                      &lt;p&gt;text&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6 col-lg-6"&gt;
                      &lt;p&gt; text&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-6 col-lg-6"&gt;
                      &lt;p&gt; text&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6 col-lg-6"&gt;
                      &lt;p&gt;text&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div ng-if="show"&gt;
                      &lt;p&gt;text&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>