как упорядочить элементы в событии с помощью jquery

У меня есть ситуация, когда я хочу разместить определенные элементы на основе события. Например:

<div id="leftBox">
    <div class="green">GREEN</div>
    <div class="blue">BLUE</div>
    <div class="red">RED</div>
</div>



<div id="rightBox">
    <div class="green">GREEN</div>
    <div class="blue">BLUE</div>
    <div class="red">RED</div>
    <div class="green">GREEN</div>
    <div class="blue">BLUE</div>
    <div class="red">RED</div>
    <div class="green">GREEN</div>
    <div class="blue">BLUE</div>
    <div class="red">RED</div>
</div>

, когда я нахожу указатель мыши на #leftBox .green , я хочу, чтобы все элементы в #rightBox с .green были сверху, например:

<div id="rightBox">
    <div class="green">GREEN</div>
    <div class="green">GREEN</div>
    <div class="green">GREEN</div>
    <div class="blue">BLUE</div>
    <div class="red">RED</div>
    <div class="blue">BLUE</div>
    <div class="red">RED</div>
    <div class="blue">BLUE</div>
    <div class="red">RED</div>
</div>

и тому же для .blue и .red