从嵌套的div中移出特定的div

Question

I'm using bootstrap with nested divs but i can't find an efficient way to move out the particular div from the nest for mobile view. i only find a way with css by doing display block when pc view and display none in mobile display view and vice versa to resolved this, but it will do a bad request from database.

(I only know a CSS-Tricks method which creates 2 C divs at different positions.)

default

.c1{
display:block}
.c2{
display:none}

media queries mobile

.c1{
display:none}
.c2{
display:block}

updated progress:

$(document).ready(function(){
      var ravenous = function() { 
            if (window.matchMedia('(max-width: 768px)').matches){
                $(".wrap_content").remove();
                $("<div class='extraDIv'></div>").appendTo(".events_wrap");
                $("<div class='top_mid col-lg-12 followmini'>as</div>").appendTo(".extraDiv");
                }
            else{
                $(".extraDIv").remove();
                $(".wrap_content").appendTo(".events_wrap");
                }
  };
    $(window).resize(ravenous);
    ravenous();  

});

it's just creating new dives i think, it's not moving the dives

any other better option to do this? (meaning, i want the only 1 C div, but it is a moving div. From parent div, moving outside and become an independent div)

Answer 1

Lets say You almost there. You didn't post HTML so I'll do simple structure. With matchMedia it will look more like that:

HTML:

<div class="wrapper">
    <div class="a">
        <div class="b">
            <div class="c">This is C</div>
        </div>
    </div>
</div>
<div class="mobile_wrapper"></div>

JavaScript:

var media_query = [
    window.matchMedia('(max-width: 768px)')
    // here You can add other medias
],
    // this is for cache purpouse
    main_wrapper = $('.wrapper'),
    mobile_wrapper = $('.mobile_wrapper'),
    nested_div = $('.c');

// this is pretty obvious I think
function media0(mq){
    if(mq.matches){
        nested_div.appendTo(mobile_wrapper); //  move c into other wrapper
    }else{
        nested_div.appendTo(main_wrapper); // move c into main wrapper
    }
}

media0(media_query[0]); // this is required to execute matchMedia first time
media_query[0].addListener(function(mq){ // event listener which is way more offective than resize() event
    media0(mq);
});

Working example: https://jsfiddle.net/1vtk3tue/1/ I added background color so You can see change.