单击时将div项目移动到div容器的顶部

Question

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

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

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

If I correctly understood what you desire, you can achieve your target with a little of jQuery, thanks to prependTo method.

Here the working example and the jQuery function.

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

UPDATE:

If you want to simply swap positions, here a variation.

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