Change DIV via jQuery

Question

I have a div with a class and when the screen is at 770px I have a code that changes this class. I would like to not only change the name of the class change it of position, display it in another div, as I could do it by jQuery?

Example

window.addEventListener('resize', function () {
    var largura = window.innerWidth;

    if (largura < 750) 
        document.getElementsByClassName('carrinho.desktop')[0].className = 'carrinho.mobile';
});

So this.mobile cart I’d like to put inside another div, relocating it from place

Example of change

<div class="Onde a div está/Carrinho desktop">
   <div class="classe que altera com o pixel"></div>
</div>

<div class="Para onde eu quero que vá a div/Carrinho mobile">
   <div class="quando a classe alterar vir pra cá"></div>
</div>

If anyone wants to know how it turned out:

$j(window).resize(function() {
    windowsize = $j(window).width();
if (windowsize <= 769) {
        $j('.carrinho-cheio-mobile').replaceWith($j('.mini-cart-content.dropdown-content.left-hand.skip-content.skip-content-.-style.block-cart.block').clone());;
    }
})

Answer 1

Would that be?

function resize(){
  if (largura < 750) {
       $('.carrinhoDesktop').attr('class', 'carrinhoMobile');
       var carrinho = $('.carrinhoMobile');
       $('.carrinhoMobile').remove();
       $('.mobile').append(carrinho);
  }else{
			if($('.carrinhoMobile').length != 0){
        $('.carrinhoMobile').attr('class', 'carrinhoDesktop');
        var carrinho = $('.carrinhoDesktop');
        $('.carrinhoDesktop').remove();
        $('.desktop').append(carrinho);
      }	
  }
}
var largura = window.innerWidth;

resize(largura);

window.addEventListener('resize', function () {
largura = window.innerWidth;
resize(largura);
});

. {
  background-color: yellow;
  display: block;
}
.carrinhoDesktop {
  display: block;
}
.desktop {
  height: 20px;
  background: #ddd;
}
.mobile {
  height: 20px;
  background: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="desktop">
  <div class="carrinhoDesktop">carrinho</div>
</div>

<div class="mobile">

</div>

Answer 2

You can use the function .replaceWith(novoConteudo) jquery. novoConteudo can be an object jQuery, one Element, a string or an array.

For example, in the example, the code would look like this:

$('.quando-a-classe-alterar-vir-para-ca').replaceWith($('.classe-que-altera-com-o-pixel'));

If you want to keep the "desktop cart" in place, pass a .clone() element as a parameter of replaceWith():

$('.quando-a-classe-alterar-vir-pra-ca').replaceWith($('.classe-que-altera-com-o-pixel').clone());

Jsfiddle