Question: I would like to inverse two div inside a bigger div when the user choose something on an input radio. 

I have this html: 

```
<input type="radio" name="orderBy" id="orderByAsc" value="asc" >
<input type="radio" name="orderBy" id="orderByDesc" value="desc" >
<div class="col-md-10">
    <div class="tags">
        //Stuff inside
    </div>
    <div class="tagsDifficile">
        //Stuff inside
    </div>
</div>

```

So i have tried something like that in javascript: 

```
$('input[type=radio]').change(function (){
    valueRadio = this.value;
    $('.col-md-10 > div').each(function() {
        if(valueRadio == 'asc'){
            $(this).prependTo(this.parentNode);
        }else{
            $(this).appendTo(this.parentNode);
        }
    });
});

```

But it's not working and when i click on the radio desc, the div do not move. 
It's working when i click on the radio asc, but nothing on desc.
Your help would be very appreciate. Thanks in advance for your answer.

Answer: 
```js
$(document).on('change', 'input[name=orderBy]', function() {
  var that = $(this);
  var val = that.val();
  var wrp = $('#wrp');
  var one = $('#one');
  var two = $('#two');
  if (val == 'desc') {
    var oneC = one.clone();
    one.remove();
    two.before(oneC);
  } else if (val == 'asc') {
    var twoC = two.clone();
    two.remove();
    one.before(twoC);
  }
});
```

```css
.tags {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
}
#one { background-color:green }
#two { background-color:red }
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Asc: <input type="radio" name="orderBy" id="orderByAsc" value="asc" >
Desc: <input type="radio" name="orderBy" id="orderByDesc" value="desc" >
<div id="wrp" class="col-md-10">
    <div id="one" class="tags">
        //Stuff inside (one)
    </div>
    <div id="two" class="tags">
        //Stuff inside (two)
    </div>
</div>
```
What do you want it to do, when you click on desc? Because right now, it won't change the order at all, you select each div and append it to its parent, so you put it exactly where it was at the beginning. If you want to change the order by clicking on desc too, just use prepend in both cases. E.g.: 

```
$('input[type=radio]').change(function (){
    $('.col-md-10 > div').each(function() {
        $(this).prependTo($(this).parent());
    });
});

```

JSFiddle: [JSFiddle](https://jsfiddle.net/k4uakama/1/)