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

Question

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

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

默认

.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所以我会做简单的结构。对于<div class="wrapper"> <div class="a"> <div class="b"> <div class="c">This is C</div> </div> </div> </div> <div class="mobile_wrapper"></div> ，它看起来更像是：

HTML：

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

JavaScript的：

user_id

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