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: 
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)
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/)