ラジオボタンとCSSを使って、レイアウト表示を切り替える動きを実装したサンプルです。
実際に案件とかで使うとなると選択値の保持とかで結局JavaScriptやらを組み合わせたりしそうですが、何かの機会で使いそうなので備忘録。

このサンプルの場合は「シングル」「カラム（2カラム）」「カード」の3種類のレイアウトに切り替えるというもので、それぞれ選択肢をクリックすると下に配置されている要素のレイアウトが変更されます。
切り替えの動きにJavaScriptは使わずにCSSのみを使用して下記のように実装しています。

<div class="switch-contents">
  <input id="layout-single" type="radio" name="layout" checked><label for="layout-single">Single</label>
  <input id="layout-column" type="radio" name="layout"><label for="layout-column">Column</label>
  <input id="layout-card" type="radio" name="layout"><label for="layout-card">Card</label>

  <ul>
    <li></li>
    <li></li>
    <li></li>
    ・
    ・
    ・
  </ul>
</div>
.switch-contents {
  padding: 1em;
  text-align: center;
}
input[name="layout"] {
  display: none;
}
label {
  display: inline-block;
  margin: 0 1em;
  font-size: 1.2rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  cursor: pointer;
}
label:hover {
  border-bottom: 2px solid #000;
}
input[name="layout"]:checked + label {
  border-bottom: 2px solid #3498db;
  cursor: default;
}
ul {
  margin: 0;
  padding: 1em 0 0;
  list-style: none;
  text-align: left;
}
ul li {
  min-height: 200px;
  background: #3498db;
}

#layout-single:checked ~ ul li {
  margin-top: 2em;
}

#layout-column:checked ~ ul {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-1 * calc(2em / 2));
  margin-left: calc(-1 * calc(2em / 2));
}
#layout-column:checked ~ ul li {
  width: calc(50% - 2em);
  margin-top: 2em;
  margin-right: calc(2em / 2);
  margin-left: calc(2em / 2);
}

#layout-card:checked ~ ul {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(-1 * calc(2em / 2));
  margin-left: calc(-1 * calc(2em / 2));
}
#layout-card:checked ~ ul li {
  width: calc(25% - 2em);
  margin-top: 2em;
  margin-right: calc(2em / 2);
  margin-left: calc(2em / 2);
}

まず、レイアウトの切り替え選択肢の部分はラジオボタン（<input type="radio">）を使用していますが、選択肢っぽく見せるためにラジオボタンは非表示にし、label要素のみが見える形にしておきます。
あとは、それぞれのラジオボタンにチェックが入ったらレイアウトを変更したい要素（このサンプルの場合はul部分）のスタイルを変更しているだけになりますが、その際に間接セレクタ（~）と:checkedを使用します。
間接セレクタは親要素が一緒で兄弟関係にある要素を指定するというものになり、例えばこのサンプルの「シングル」が選択された場合であれば、#layout-single:checked ~ ulという形で記述することで「#layout-singleにチェックが入っているときの兄弟関係にあるul要素」へのスタイルを指定することができます。

注意点としては間接セレクタを利用しているのでラジオボタンとレイアウト変更したい要素などは同階層に配置しなければならないというのがあるため、例えばスタイル調整のために各種ラジオボタンをdivで括るといったようなことをした場合は動作しなくなります。
そのような場合は、ラジオボタンの位置はそのままにしてlabel要素のみを任意の場所に動かしたりタグで括るなどすることで解決できると思います。