EvgenyTryap,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
.btn {color: #aaa; cursor: pointer;}
.btn.active {color: #222;}
#column-block { display: flex; flex-wrap: wrap;}
.column {width: 50%; border: 1px hsla(240, 100%, 50%, 1) solid; box-sizing: border-box;}
#column-block.column-block-4 .column {width: 25%;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var num = window.localStorage.getItem('btn')||0, btn = $(".btn");
btn.on("click", function() {
if($(this).is(".active")) return;
btn.removeClass("active");
$(this).addClass("active");
$("#column-block").toggleClass("column-block-4");
var i = btn.index(this);
window.localStorage.setItem('btn',i);
}).eq(num).click()
});
</script>
</head>
<body>
<div>
<span class="btn active" >показать по 2</span>
<span class="btn">показать по 4</span>
</div>
<div id="column-block" class="column-block">
<div class="column">колонка 1</div>
<div class="column">колонка 2</div>
<div class="column">колонка 3</div>
<div class="column">колонка 4</div>
</div>
</body>
</html>