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>
```
This can actually be accomplished with CSS alone, no need for any Javascript. What we're going to do is use flexbox to layout the divs and then, using a `:checked` pseudo class and an adjacent selector `~`, change the `order` of the child divs.

```css
.col-md-10{
    display:-webkit-flex;
    display:flex;
    -webkit-flex-flow:row wrap;
    flex-flow:row wrap;
}
.col-md-10>div{
    -webkit-flex:1 0 100%;
    flex:1 0 100%;
    width:100%;
}
input#orderByDesc:checked~.col-md-10>div:first-child{
 -webkit-order:2;
 order:2;
}
input#orderByDesc:checked~.col-md-10>div:last-child{
 -webkit-order:1;
 order:1;
}

*{box-sizing:border-box;}
.col-md-10{background:red;margin:10px 0 0;padding:5px 10px;}
.col-md-10>div{background:green;margin:5px 0;padding:20px;}
```

```html
<input checked="checked" type="radio" name="orderBy" id="orderByAsc" value="asc" > Asc
<input type="radio" name="orderBy" id="orderByDesc" value="desc" > Desc
<div class="col-md-10">
    <div class="tags">
        Box 1
    </div>
    <div class="tagsDifficile">
        Box 2
    </div>
</div>
```

**EDIT:** If you have many child divs and don't fancy writing CSS to change the order of every single one, you could change the `flex-direction` of the parent div to `row-reverse` instead:

```
input#orderByDesc:checked~.col-md-10{
    flex-flow:row-reverse wrap;
}

```

* [More information on flexbox on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
* [More information on flexbox on CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
* [More information on adjacent selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors)
* [More information on `:checked` pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:checked)