Переместить элемент div поверх контейнера div при его использовании

Question

! http://postimg.org/image/ym5xp7ilv/

Что бы я хотел достичь, это переместить элемент div, который щелкнут в верхней части контейнера div при каждом щелчке по элементу ... остальные элементы (те, кто не нажал) заполнили остальная часть контейнера сНа соответственно

HTML

<div class="row"> 
     <div class="col-md-12"> 
      <div class="containing_div"> 
       <div class="container_div"></div> 
       <div class="menu_div"> 
        <div class="item_div">Photos</div> 
        <div class="item_div">Video</div> 
        <div class="item_div">Music</div> 
        <div class="item_div">Files</div> 
        <div class="item_div">Contacts</div> 
       </div> 
      </div> 
     </div> 
    </div> 

CSS

.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; 
} 

Answer 1

Если я правильно понял, чего вы желаете, вы можете достичь своей цели с помощью jQuery, благодаря методу prependTo.

Here the working example и функция jQuery.

$('.item_div').on('click',function(){ 
    $(this).prependTo('.container_div'); 
}); 

UPDATE:

Если вы хотите просто поменять позиции, here вариацию.

$('.item_div').on('click',function(){ 
    $(this).prependTo('.menu_div'); 
});