如何使用jquery将div移动到元素的顶部，将另外两个移动到元素的底部

Question

Hey I'm making this accordion and when you select an option in the top, one of the three other panels have to show. To accomplish this I would like to move the panel in the DOM to the top of the tree. The other two have to be moved to the bottom however. Right now it just switchs to one of the three but if I select a new one it doesn't update so I'm sure the dom is all mixed up.

HTML

<button class="accordion" id="special_accord">
                        <h2 class="float-left">2.</h2>
                        <h2 class="text-center">Model</h2></button>
                    <div class="panel" id="default_panel">
                        <label>
                            <h3 class="text-center">Please select a Device Type above</h3></label>
                    </div>
                    <div class="panel" id="laptop_panel">
                        <div id="col1">
                            <label class="control control--radio">LAPTOP
                                <input type="radio" name="radio-model" value="laptop1" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                        <div id="col3">
                            <label class="control control--radio">LAPTOP2
                                <input type="radio" name="radio-model" value="laptop2" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                        <div id="col2">
                            <label class="control control--radio">LAPTOP3
                                <input type="radio" name="radio-model" value="laptop3" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                    </div>
                    <div class="panel" id="tablet_panel">
                        <div id="col1">
                            <label class="control control--radio">iPad 2
                                <input type="radio" name="radio-model" value="tablet-ipad2" onclick="calculateTotal()" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">iPad 3
                                <input type="radio" name="radio-model" value="tablet-ipad3" onclick="calculateTotal()" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">iPad 4
                                <input type="radio" name="radio-model" value="tablet-ipad4" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">iPad Air
                                <input type="radio" name="radio-model" value="tablet-ipadAir" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">iPad Mini
                                <input type="radio" name="radio-model" value="tablet-ipadMini" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">iPad Mini 2
                                <input type="radio" name="radio-model" value="tablet-ipadMini2" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                        <div id="col3">
                            <label class="control control--radio">Nexus 7
                                <input type="radio" name="radio-model" value="tablet-nexus7" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                        <div id="col2">
                            <label class="control control--radio">Amazon Fire
                                <input type="radio" name="radio-model" value="tablet-amazonFire" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">Amazon Kindle
                                <input type="radio" name="radio-model" value="tablet-amazonFire" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                    </div>
                    <div class="panel" id="phone_panel">
                        <div id="col1">
                            <label class="control control--radio">iPhone 3 &amp; 4
                                <input type="radio" name="radio-model" value="phone-iphone3" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">iPhone 5, 5c, 5s
                                <input type="radio" name="radio-model" value="phone-iphone5cs" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">iPhone 6
                                <input type="radio" name="radio-model" value="phone-iphone6" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">iPhone 6 Plus
                                <input type="radio" name="radio-model" value="phone-iphone6+" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                        <div id="col3">
                            <label class="control control--radio">Microsoft Lumia 430
                                <input type="radio" name="radio-model" value="phone-lumia430" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                        <div id="col2">
                            <label class="control control--radio">Galaxy S3
                                <input type="radio" name="radio-model" value="phone-galaxys3" />
                                <div class="control__indicator"></div>
                            </label>
                            <label class="control control--radio">Galaxy S4
                                <input type="radio" name="radio-model" value="phone-galaxys4" />
                                <div class="control__indicator"></div>
                            </label>
                        </div>
                    </div>

CSS

.icon-select {
    margin-right: 20px;
    margin-left: 20px;
}

#col1 {
    float: left;
    width: 33%;
    height: 100%;
}

#col2 {
    float: center;
    height: 100%;
    width: 33%;
    overflow: hidden;
    display: table-cell;
}

#col3 {
    float: right;
    height: 100%;
    width: 34%;
    margin-left: 20px;
    overflow: hidden;
    display: table-cell;
}

#price_tally {
    float: right;
    display: inline-block;
    border: 1px solid #6fdd7a;
    padding-top: 10px;
    border-radius: 2px;
    background-color: #6fdd7a;
}

#price_tally hr {
    border: 1px solid #ffffff;
    margin: 0px;
}

#money_tally {
    text-align: center;
    font-size: 3em;
    padding: 0px;
    margin: 0px;
    color: #ffffff;
}

#price_tally button {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 16px;
    font-size: 26px;
    background-color: #6fdd7a;
    color: #ffffff;
    border: none;
    outline: none;
    cursor: pointer;
}

#price_tally button:hover {
    background-color: #65c76f;
}

button.accordion {
    background-color: #ffffff;
    color: #444;
    cursor: pointer;
    padding: 2px;
    width: 50%;
    text-align: left;
    outline: none;
    transition: 0.4s;
    border-left: 1px solid #6fdd7a;
    border-right: 1px solid #6fdd7a;
    border-top: 1px solid #6fdd7a;
    border-radius: 4px;
    border-bottom: none;
}

button.accordion.active,
button.accordion:hover {
    background-color: #6fdd7a;
    color: #ffffff;
}

div.panel {
    padding: 0px 18px;
    background-color: #ffffff;
    max-height: 0;
    overflow: hidden;
    width: 46%;
    border-right: 1px dotted #6fdd7a;
    border-left: 1px dotted #6fdd7a;
    transition: max-height 0.2s ease-out;
}

#optional_panel {
    border-bottom: 1px solid #6fdd7a;
}

label > input {
    visibility: hidden;
    position: absolute;
}

label > input + img {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 2px;
    -webkit-transition: all 0.25s linear;
}

label > input:checked + img {
    background-color: #6fdd7a;
}

.invisible {
    display: none;
}

div.showing {
  padding: 0px 18px;
  background-color: #ffffff;
  max-height: 600px;
  overflow: hidden;
  width: 46%;
  max-height: 100%;
  border-right: 1px dotted #6fdd7a;
  border-left: 1px dotted #6fdd7a;
  transition: max-height 0.2s ease-out;
}

.control {
    font-size: 18px;
    position: relative;
    display: block;
    margin-bottom: 15px;
    padding-left: 30px;
    cursor: pointer;
}

.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.control__indicator {
    position: absolute;
    top: 2px;
    left: 0;
    width: 20px;
    height: 20px;
    background: #e6e6e6;
}

.control--radio .control__indicator {
    border-radius: 50%;
}

.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
    background: #444;
}

.control input:checked ~ .control__indicator {
    background: #6fdd7a;
}

.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
    background: #6fdd7a;
}

.control__indicator:after {
    position: absolute;
    display: none;
    content: '';
}

.control input:checked ~ .control__indicator:after {
    display: block;
}

.control--checkbox .control__indicator:after {
    top: 4px;
    left: 8px;
    width: 3px;
    height: 8px;
    transform: rotate(45deg);
    border: solid #fff;
    border-width: 0 2px 2px 0;
}

.control--checkbox input:disabled ~ .control__indicator:after {
    border-color: #7b7b7b;
}

.control--radio .control__indicator:after {
    top: 7px;
    left: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

.control--radio input:disabled ~ .control__indicator:after {
    background: #7b7b7b;
}

JS

var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function () {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
            panel.style.maxHeight = null;
        }
        else {
            panel.style.maxHeight = panel.scrollHeight + "px";
        }
    };
}
var def = $("#special_accord");
var lap = $("#laptop_panel");
var tab = $("#tablet_panel");
var pho = $("#phone_panel");
$("#laptop_button").click(function () {
    lap.before().insertAfter(def);
});
$("#tablet_button").click(function () {
    tab.before().insertAfter(def);
});
$("#phone_button").click(function () {
    pho.before().insertAfter(def);
});

Answer 1

This may not really answer your question. But is this close to your objective? I am not too sure about your objective here.

$(".accordion").on("click", function(e){

  $(".panel").hide();
  console.log("selected: ", $(this).attr("data-model"));
  var model = $(this).attr("data-model");
  if (model) {
    $( "#" + model + "_panel").show("slow");
  }
  else {
    $("#default_panel").show("slow");
  }

});

// hide all panels
$(".panel").hide();

https://jsfiddle.net/sudarpochong/ncynro4j/