Question

There are some divs with there background divs. By Clicking on settings the current divs hide and the background div displays. When I re arrange the divs (Divs are sorttable). The background divs retains its original position. And then when I want to see its background (Settings div)it rotates it from the old position

The script that rotates

      $('.flip_div').click(function() {
        var div1 = $(this).parent();
        var div2 = $('#'+$(this).attr('attached-with'));
        var toHide = div1.is(':visible') ? div1 : div2;
        var toShow = div2.is(':visible') ? div1 : div2;

        toHide.removeClass('flip in').addClass('flip out').hide();
        toShow.removeClass('flip out').addClass('flip in').show();
    });

FIDDLE

Re arrange the divs then click on settings to see the problem

Answer 1

You can simply wrap both back and front panels with a single element and make it a target of sorting.
So, HTML (see <div class="single_panel"> around back and front section):

<div class="single_panel">
            <section id="pannel_front_1" class="pannel">
                <h4 class="pannel_title">Pannel 1</h4>
                <span class="flip_div div_menu" attached-with="pannel_back_1" >Settings</span>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, consequat.</p>
            </section>

            <section id="pannel_back_1" class="pannel" style="display:none">
                <h4 class="pannel_title">Back Side 1</h4>
                <span class="flip_div div_menu" attached-with="pannel_front_1">back</span>
                    <p>Back Side.</p>
             </section>
        </div>

CSS for that new element:

.single_panel{
    overflow:hidden;
    width: 100px;
    float:left;
}

And updated sortable init code:

$(document).ready(function(){
    $(function() {
        $( "#sidebar" ).sortable({
          connectWith: ".single_panel",
        }).disableSelection();
      });

Demo: http://jsfiddle.net/AFfNV/3/