How to move an element after another element using JS or jquery?

Answer 1

You can use insertAfter to move the element. Docs

$('.price').each(function() {
    $(this).insertAfter($(this).parent().find('.name'));
});

Here you have the updated fiddle.

Answer 2

<div>'s are block-level elements so that's their natural behavior. You could float the div's and then clear them, or use display: inline.

I think this link would help you understand a bit more though:

CSS block and inline

Answer 3

$('.box-related-product-top > div').each(function(){
    $(this).find('.image').appendTo(this);
    $(this).find('.name').appendTo($(this));
    $(this).find('.price').appendTo($(this));
    $(this).find('.cart').appendTo($(this));
});

Try it: http://jsfiddle.net/m6djm/1/