JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <button type="button" class="btn h">Горизонтально</button>
  <button type="button" class="btn v">Вертикально</button>
  <div class="horizontal-view current">
    <div class="icon-wrapper">
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
      <div class="icon"></div>
    </div>
 </div>
 <div vertical-view current>
  <div class="card-wrapper">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
 </div> 
</div>

CSS

.icon-wrapper {
  display: flex;
  width: 600px;
}
.icon {
  background: red;
  width: 150px;
  height: 150px;
  margin: 10px;
}
.icon:last-child{
  margin-right: 0;
}

.card-wrapper {
  display: flex;
  flex-direction: column;
  width: 600px;
  display: none;
}
.card {
  background: green;
  width: 100%;
  height: 150px;
  margin: 10px;
}
.current {
 display: block;
}

JavaScript

jQuery('.btn.h, .btn.v').click(function(e) {
		console.log(jQuery(this).hasClass('v'));
    
	  var direction = jQuery(this).hasClass('v') ? 'column' : 'row' ;
    
  	jQuery('.icon-wrapper').css('flex-direction', direction);
});