如果另一个div的高度大于值，则移动div（使用jQuery）

Question

See the image below. This illustrates what I am trying to achieve. I am sure it is possible with jquery but do not have the expertise to write it.

What i want is that if 'DIV A'(shown in green) has a height lower than a set PX value (for example if div A's height is smaller than 300px) then 'DIV B' (shown in red) should move the the second position. If DIV A's height is greater then that value then DIV A should simply remain in place and not be moved.

I started a fiddle here: http://jsfiddle.net/qwcpokdL/

example code: B

<div class="right">
<div class="B">A</div>   
</div>

example css:

.left, .right {width:49%; border: 1px solid #000; margin:1px; min-height:600px}
.left {float:left;}
.right {float:right;}
.somediv, .somediv2 {width:98%; height:125px; border:1px solid #ccc; margin:2px}

.A {background:red; width:98%%; height:150px; margin:2px}
.B {background:green; width:98%; height:100px; margin:2px}

Thanks in advance for help!

Answer 1

$(function() {
  if($('#A').height() < 300){
    $('#A').remove().appendTo("#right");  
  }
});

Take a look at this : http://jsfiddle.net/banhjx1x/1/

Answer 2

Please check with the below code

$(document).ready(function() {
    var divAheight = $('.B').height();
    if(divAheight >= 100) {
        $( ".A" ).insertAfter( ".B" );
    }
});

Answer 3

You can use the following jQuery:

function checkA(){
    if($('.B').height()<300){
        var a = $('.A');
        $('.A').remove();
        $('.B').after (a);
    }
    else {
        var a = $('.A');
        $('.A').remove();
        $('.right').append(a);
    }
}
$(document).ready(function(){
    checkA();
});
$( window ).resize(function() {
    checkA();
});

Also don't forget to add script tag for jQuery in your code.