<form>

  <fieldset>  

    <label class="active">

      <input type="radio" name="class" value="container--one" class="radio" checked="checked">

      <code>column</code>

    </label>        

    <label>

      <input type="radio" name="class" value="container--two" class="radio">

      <code>wrap</code>

    </label>     

    <label>

      <input type="radio" name="class" value="container--three" class="radio">

      <code>column wrap</code>

    </label>         

    <label>

      <input type="radio" name="class" value="container--four" class="radio">

      <code>row-reverse wrap</code>

    </label>             

  </fieldset>  

</form>

​

<div class="container container--one" id="container">

  <p>

    <strong>Item 1:</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. 

  </p>

  <p>

    <strong>Item 2:</strong> Quisquam facilis dolore accusantium voluptatem suscipit.   

  </p>

  <p>

    <strong>Item 3:</strong> Voluptas illo non consequuntur.

  </p>  

</div>

.container--one {

  flex-flow: column;

}

​

.container--two {

  flex-flow: wrap;

}

​

.container--three {

  flex-flow: column wrap;

}

​

.container--four {

  flex-flow: row-reverse wrap;

}

​

/* ETC (Formatting only): */

​

body {

  margin: 1.5em;

  font-size: 130%;

  font-family: sans-serif;

  background: #F2F0EC;

  color: #2E2C08;

}

​

.container {

  display: flex;  

  border: 10px solid #2E2C08;

  background: white;  

}

​

.container p {

  margin: 0.25rem;

  padding: 0.5em;

  text-align: center;

  background: #abab9d;

}

​

fieldset {

  border: #abab9d 1px solid;

  padding: 0;

  margin-bottom: 2em; 

}

​

label {

  display: inline-block;

  padding: 0.5em;

  cursor: pointer;

}

​

.active {

  background: #abab9d;

}

var radios = document.querySelectorAll('.radio');

var container = document.getElementById('container');

radios.forEach(function(i){

    i.addEventListener('click', function(el){

        var clicked = el.currentTarget;

        var active = clicked.parentElement.parentElement.querySelector('.active');

        active && active.classList.remove('active');

        clicked.parentElement.classList.add('active');     

        container.className = 'container '+clicked.value;

    });

});