title: Bootstrap - Change columns height on stack
body: <p>Using Bootstrap, I have a row and 3 column divs in my html and I have the css set to give the columns a height of 100%. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div id="one" class="col-sm-4"&gt;one&lt;/div&gt;
      &lt;div id="two" class="col-sm-4"&gt;two&lt;/div&gt;
      &lt;div id= "three" class="col-sm-4"&gt;three&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html,body,{
      height:100%;
  }
  .col-sm-4{
      border: 1px solid black;
      height: 100%;
  } 
  #one{
      background-color: red;
  }
  #two{
      background-color: blue;
  }
  #three{
      background-color: green;
  }
  </code></pre>
  
  <p>When the screen get small enough and the columns stack, I want to essentially change the height of the columns from 100% to 33.3333% so they don't exceed the height of the body. Then when the screen gets big and the columns unstack I want to change their height back to 100%. How do I do this?</p>