<form>

  <fieldset>  

    <label class="active">

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

      <code>row</code>

      <small>(default)</small>

    </label>        

    <label>

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

      <code>column</code>

    </label>     

    <label>

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

      <code>row</code> (+ writing-mode)

    </label>         

    <label>

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

      <code>column</code> (+ writing-mode)

    </label>             

  </fieldset>  

</form>

​

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

  <p>

    <strong>Item 1</strong>

  </p>

  <p>

    <strong>Item 2</strong>

  </p>

  <p>

    <strong>Item 3</strong>

  </p>  

</div>

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;

    });

});