Moving a column in a row using Javascript

I have divide the web page into 3 columns as follows. And filled the div with a image in javascript.

<div id="fullPage" class="image-motion-wrapper">
    <div class="row">
        <div class="col-md-4" align="left" id="left">   
        </div>
        <div class="col-md-4" align="center" id="center">   
        </div>
        <div class="col-md-4" align="right" id="right">     
        </div>
    </div>
</div>

Now I need to move first column(with it's image) left to right using Javascript.

How can I do that?

You should try this yourself. I created a fiddle for you. A very simple one. Give it a try it'll be helpful to understand the concept.

  $("#left").insertAfter($("#right"));

fiddle1

$("#left").insertAfter($("#right"));
$("#center").insertAfter($("#right"));

fiddle2