title: Moving <div> from one <div> to another back and forth
body: <p>I found lots of information on the web about how to remove, attach, prepend, etc.  Element from and to DIV.  Unfortunately I have a hard time making it work.   </p>
  
  <p>In my project, I will have to attach element to div and move them around on a grid (each grid cell being a div of it's own)  Bellow is a small script which mimics what I'm trying to do.  </p>
  
  <p>Here's the example (here's a link to JSFiddle : <a href="http://jsfiddle.net/mgR5b/25/" rel="nofollow">http://jsfiddle.net/mgR5b/25/</a>):</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="LeftAndRightRow1" style="display:inline-block; height:100%;width:100%;border:1px solid black; background-color: red;"&gt;
         &lt;div id="Left" style="display:inline-block; height:100%;width:45%; border:1px solid black; background-color: blue;"&gt;
          &lt;button id="B1"&gt;B1&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="Right" style="display:inline-block; height:100%;width:45%;border:1px solid black; background-color: pink;"&gt;
          &lt;button id="B2"&gt;B2&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="LeftAndRightRow2" style="display:inline-block; height:100%;width:100%;border:1px solid black; background-color: red;"&gt;
          &lt;div id="Left2" style="display:inline-block; height:100%;width:45%; border:1px solid black; background-color: yellow;"&gt;
              &lt;button id="B3"&gt;B3&lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="Right2" style="display:inline-block; height:100%;width:45%;border:1px solid black; background-color: purple;"&gt;
              &lt;button id="B4"&gt;B4&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
     &lt;br&gt;
     &lt;button id="SwapButton"&gt;Swap Button&lt;/button&gt;
  </code></pre>
  
  <p>JQuery / JavaScript</p>
  
  <p>Now, imagine I want to swap the container "Left" (I want to move the Div, not the button) to the second row (LeftAndRightRwo2).  </p>
  
  <p>I tried various things but not of them worked... My last attempt: </p>
  
  <pre><code>$(document).ready(function () {
      $("#SwapButton").click(function () {
          alert('trying to swap');
          $("#Left").remove();
          $("#LeftAndRightRow2").append($("#Left"));
      });
  });
  </code></pre>
  
  <p>etc. </p>
  
  <p>None of what I tried worked.  </p>
  
  <p>Can someone help understand how to move div from one place to another. </p>
  
  <p>Thank you</p>