Режимы отображения списка - список и плитка

Question

Меня смущает правильный подход при решении следующей задачи:

• Наличие списка с изображением, заголовком, тегами и значками
• Две кнопки, которые должны переключать отображение этого списка
• Работа с Bootstrap и jQuery

Ex:

<div class="display__list">
  <div class="col-12">
    <div class="row">
     <div class="col-2">Image 1</div>
     <div class="col-6">Title 2</div>
     <div class="col-4">Icons 3</div>
    </div>
  </div>
  <div class="col-12">
    <div class="row">
      <div class="col-2">Image 2</div>
      <div class="col-6">Title 2</div>
      <div class="col-4">Icons 2</div>
    </div>
 </div>
 <div class="col-12">
  <div class="row">
    <div class="col-2">Image 3</div>
    <div class="col-6">Title 3</div>
    <div class="col-4">Icons 3</div>
  </div>
 </div>

<div class="display__tile">
  <div class="col-4">
    <div class="row">
      <div class="col-12">Title 1</div>
      <div class="col-6">Image 1</div>
      <div class="col-6">Icons 1</div>
   </div>
 </div>
 <div class="col-4">
   <div class="row">
     <div class="col-12">Title 2</div>
     <div class="col-6">Image 2</div>
     <div class="col-6">Icons 2</div>
   </div>
 </div>
 <div class="col-4">
   <div class="row">
     <div class="col-12">Title 3</div>
     <div class="col-6">Image 3</div>
     <div class="col-6">Icons 3</div>
    </div>
  </div>
</div>

Пока что мои подходы были бы:

1. Одно центральное изменение класса, которое повлияет на стиль детей.

2. Использование атрибутов data - class - tile & data - class - list с именами классов.

3. Определение списков разметки и отображение / скрытие.

Только третий подход мог бы решить проблему с порядком разметки. Я хотел бы избежать дублирования разметки и предпочел бы один список, который ведет себя как необходимо. Любая дальнейшая помощь - подтверждение будет полезно. Заранее спасибо!