title: how to expand a div col in bootstrap on hover
body: <p>I'm using bootstrap to build a page. I have a section in which there is 6 different sections (3 in a row). </p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-4"&gt;
       &lt;div style="background:#ababab"&gt;Lorium ispum&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
       &lt;div style="background:#ababab"&gt;Lorium ispum&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
       &lt;div style="background:#ababab"&gt;Lorium ispum&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-4"&gt;
       &lt;div style="background:#ababab"&gt;Lorium ispum&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
       &lt;div style="background:#ababab"&gt;Lorium ispum&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
       &lt;div style="background:#ababab"&gt;Lorium ispum&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to expand a <code>col</code> to the full width of the container on mouse over. Meanwhile, the other <code>col</code> sections will be disappeared.</p>
  
  <p>I tried to adapt to hide the all 5 cols on mouse over through jQuery. But don't know how to expand the container. Can anybody help me to solve this? If you need any help, just let me know. </p>