Edit in JSFiddle

<b>order:</b>
<input type="radio" name="flex" id="one"><label for="one">1234</label>
<input type="radio" name="flex" id="two" checked><label for="two">2341</label>
<input type="radio" name="flex" id="three"><label for="three">2431</label>

<br><br>

<div class="flex">
    <div class="itm itm1">1</div>
    <div class="itm itm2">2</div>
    <div class="itm itm3">3</div>
    <div class="itm itm4">4</div>
</div>
body{ padding:1em; font-family:arial; }
input{ display:none; }
label{ padding:.2em .5em; }
label:hover{ background:#ccc; cursor:pointer; }
input:checked + label{ font-weight:bold; background:#ccc; }

.flex {
	display: flex;
	
    background: #9ba5b3;   padding: 5px;
}
.itm {
    background: #2e5b61;   font-size: 2.5rem;     color: #eee;     margin: 5px;     padding: 15px;
}
#two:checked ~ .flex .itm1 {  order: 1; }

#three:checked ~ .flex .itm1 {  order: 4; }
#three:checked ~ .flex .itm2 {  order: 1; }
#three:checked ~ .flex .itm3 {  order: 3; }
#three:checked ~ .flex .itm4 {  order: 2; }