Jquery Animate effect to move div

i'd like to be able to add animation to this simple jquery so when the div is moved to it s new place

<div class="container">
    <div class="left-side-bar">
        <div class="long blue" id="1">
            1
        </div>
        <div class="short red" id="2">
            2
        </div>

    </div>

    <div class='middle-side-bar'>
        <div class='long green' id="3">
            3
        </div>

    </div>

    <div class='right-side-bar'>
        <div class='short yellow' id="4">
            4
        </div>
    </div>

</div>

the CSS

.left-side-bar{
    clear: both;
    width: 32%;
    text-align: center;
    float: left;
    margin-top: 1%;
    margin-bottom: 100px;

}

.middle-side-bar{
    width: 32%;
    text-align: center;
    float: left;
    margin: 1% 0 1% 1.6%;
}

.right-side-bar{
    width: 32%;
    text-align: center;
    float: left;    
    margin: 1% 0 1% 1.6%;
}

.green {
    background-color: green;
}

.long {
    height: 300px;
}

.short {
    height: 200px;
}

.red {
    background-color: red;

}

.blue {
    background-color: blue;
}

.yellow {
    background-color:  yellow;
}

Basically when the div is moved to its new place i d like to be animated not just appear to it s new place The idea is once the width of screen reaches to certain point the dives start to move

here is the jsfiddle DEMO