Edit in JSFiddle

<b>flex-direction:</b>
<input type="radio" name="flex" id="row" checked><label for="row">row</label>

<input type="radio" name="flex" id="row-reverse"><label for="row-reverse">row-reverse</label>

<input type="radio" name="flex" id="column"><label for="column">column</label>

<input type="radio" name="flex" id="column-reverse"><label for="column-reverse">column-reverse</label>

<br><br>

<div class="flex">
  <div class="flex-itm">1</div>
  <div class="flex-itm">2</div>
  <div class="flex-itm">3</div>
  <div class="flex-itm">4</div>
</div>
html,body{  }
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;
}
.flex-itm {  
	background: #2e5b61;  
	font-size: 2.5rem;  
	color: #eee;  
	margin: 5px; 
	padding: 15px;
}


#row:checked ~ .flex {   flex-direction: row; }

#row-reverse:checked ~ .flex {   flex-direction: row-reverse; }

#column:checked ~ .flex {   flex-direction: column; }

#column-reverse:checked ~ .flex {   flex-direction: column-reverse; }