１カラムで表示　　 ２カラムで表示　　 ３カラムで表示　　 ４カラムで表示　

サンプルのhtmlソース

<p>
  <a href="#sample01">１カラムで表示　</a>　
  <a href="#sample02">２カラムで表示　</a>　
  <a href="#sample03">３カラムで表示　</a>　
  <a href="#sample04">４カラムで表示　</a>
</p>
<div class="sample-wrap">
  <p>サンプル</p>
  <div id="sample01">
    <div>
    これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。
    /*---- 中略 ----*/
    これは、:target疑似クラスを使い、CSSのみで表示するさんぷる用のだみーてきすとです。
    </div>
  </div>
  /*---- 以下、id="sample02"から id="sample04"まで同じものが続きます ----*/
</div>

サンプルのCSSソース

#sample01,#sample02,
#sample03,#sample04　{
  display:none;
  }
#sample01 div,#sample02 div,
#sample03 div,#sample04 div　{
  width:800px;
  margin:0 auto;
  padding:8px 10px 10px; 
  text-align:left;
  color:#444;
  background:#fff;
  }
/*「column-count」について、実際にはベンダープレフィックス付きも記載しています */
#sample02 div {
  column-count: 2; 
  }
#sample03 div {
  column-count: 3; 
  }
#sample04 div {
  column-count: 4; 
  }
#sample01:target,#sample02:target,
#sample03:target,#sample04:target　{
  display:block;
  }