title: move div item on top of div container when being onclicked
body: <p>!<a href="http://postimg.org/image/ym5xp7ilv/" rel="nofollow">http://postimg.org/image/ym5xp7ilv/</a></p>
  
  <p>what i would like to achieve is to move the div item which is clicked on the top of the div container when each item is clicked...the rest of the items(those who are not being clicked) would fill the rest of the div container respectively </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div class="containing_div"&gt;
                  &lt;div class="container_div"&gt;&lt;/div&gt;
                  &lt;div class="menu_div"&gt;
                      &lt;div class="item_div"&gt;Photos&lt;/div&gt;
                      &lt;div class="item_div"&gt;Video&lt;/div&gt;
                      &lt;div class="item_div"&gt;Music&lt;/div&gt;
                      &lt;div class="item_div"&gt;Files&lt;/div&gt;
                      &lt;div class="item_div"&gt;Contacts&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.containing_div
  {
    height: 100%;
  }
  
  .container_div
  {
    background: #fff;
    height: 100%;
    width: 90%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    text-align: center;
    font-family: "Open Sans";
    font-size: 26px;
    float: left;
    padding-top: 25px;
    position: relative;
  }
  
  .menu_div
  {
    background: transparent;
    float: left;
  }
  
  .item_div
  {
    background: #ddd;
    height: 80px;
    color: #bbb;
    font-family: "Open Sans";
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 10px;
    text-align: center;
    padding: 8px;
    border-radius: 0 2% 2% 0;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    cursor: hand;
  }
  </code></pre>