Move a particular div out of nested divs
<p>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.</p>

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

<p>default</p>

<pre><code>.c1{
display:block}
.c2{
display:none}
</code></pre>

<p>media queries mobile</p>

<pre><code>.c1{
display:none}
.c2{
display:block}
</code></pre>

<p>updated progress:</p>

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

<p>});</p>

<blockquote>
  <p>it's just creating new dives i think, it's not moving the dives</p>
</blockquote>

<p>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)</p>

<p><a href="https://i.stack.imgur.com/jZ5aM.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jZ5aM.jpg" alt="Image link"></a></p>