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

Question

我正在使用带有嵌套div的bootstrap，但我无法找到一种有效的方法从移动视图中移出嵌套中的特定div。 我只能通过在移动显示视图中查看和显示无显示块时找到css的方式，反之亦然解决这个问题，但是它会从数据库执行错误的请求。

（我只知道一个CSS-Tricks方法，它在不同的位置创建2个C div。）

默认

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

媒体查询移动

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

更新进度：

$(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();  

}）;

它只是在创造新的潜水，我认为，它不会移动潜水

还有其他更好的选择吗？ （意思是，我想要唯一的1 C div，但它是一个移动的div。从父div，移动到外面并成为一个独立的div）

Answer 1

让我们说你几乎在那里。 你没有发布HTML所以我会做简单的结构。 使用matchMedia它看起来更像是：

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);
});

工作示例： https ： //jsfiddle.net/1vtk3tue/1/我添加了背景颜色，以便您可以看到更改。