<style>
  * { box-sizing: border-box }

  /* Wrappers dengan kolom fleksibel */
  #header-wrapper,
  #top-column,
  #below-main,
  #footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    justify-content: space-between;
    text-align: center;
    border: 1px solid #ddd;
    margin-bottom: 30px;
  }

  .header-col,
  .top-col,
  .below-main-col,
  .footer-col {
    border: 1px solid #ddd;
    padding: 10px;
  }

  .header-col h1,
  .top-col h1,
  .below-main-col h1,
  .footer-col h1 {
    margin: 0;
  }

  /* Kolom responsif */
  .column1 > * { flex: 1 1 100% }
  .column2 > * { flex: 1 1 calc(50% - 20px) }
  .column3 > * { flex: 1 1 calc(33.33% - 20px) }
  .column4 > * { flex: 1 1 calc(25% - 20px) }

  /* Responsif Tablet */
  @media (max-width: 1024px) {
    .column4 > * { flex: 1 1 calc(33.33% - 20px) }
    .column3 > * { flex: 1 1 calc(50% - 20px) }
    .column2 > * { flex: 1 1 100% }
  }

  /* Responsif Mobile */
  @media (max-width: 768px) {
    #header-wrapper > *,
    #top-column > *,
    #below-main > *,
    #footer-wrapper > * {
      flex: 1 1 100%;
    }
  }

  /* Struktur Konten */
  #content-wrapper {
    width: 100%;
    margin: 0 auto 30px;
    padding: 10px;
    border: 1px solid #ddd;
    display: flex;
    gap: 20px;
  }

  .column {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  .column1 .column     { flex: 1 1 100% }
  .column2 .main       { flex: 3 }
  .column2 .sidebar    { flex: 1 }

  .column3 .left-sidebar   { flex: 1; order: 1 }
  .column3 .main-content   { flex: 2; order: 2 }
  .column3 .right-sidebar  { flex: 1; order: 3 }

  .column4 .main-content   { flex: 2; order: 1 }
  .column4 .left-sidebar   { flex: 1; order: 2 }
  .column4 .right-sidebar  { flex: 1; order: 3 }

  .column5 .left-sidebar   { flex: 1; order: 1 }
  .column5 .main-content   { flex: 2; order: 2 }
  .column5 .sidebar        { flex: 1; order: 3 }
  .column5 .right-sidebar  { flex: 1; order: 4 }

  /* Sembunyikan sidebar tertentu di mobile */
  @media (max-width: 768px) {
    #content-wrapper {
      flex-direction: column;
    }

    .column .column {
      width: 100%;
      order: unset;
    }

    .column3 .left-sidebar,
    .column5 .left-sidebar {
      display: none;
    }
  }
</style>
 

<!-- Header -->
  <div id="header-wrapper" class="column3">
    <div class="header-col"><h1>Header 1</h1></div>
    <div class="header-col"><h1>Header 2</h1></div>
    <div class="header-col"><h1>Header 3</h1></div>
  </div>

  <!-- Top Column -->
  <div id="top-column" class="column2">
    <div class="top-col"><h1>Top 1</h1></div>
    <div class="top-col"><h1>Top 2</h1></div>
  </div>

  <!-- Main Content -->
  <div id="content-wrapper" class="column5">
    <div class="column left-sidebar">Left Sidebar</div>
    <div class="column main-content">Main Content</div>
    <div class="column sidebar">Sidebar</div>
    <div class="column right-sidebar">Right Sidebar</div>
  </div>

  <!-- Below Main -->
  <div id="below-main" class="column4">
    <div class="below-main-col"><h1>Below 1</h1></div>
    <div class="below-main-col"><h1>Below 2</h1></div>
    <div class="below-main-col"><h1>Below 3</h1></div>
    <div class="below-main-col"><h1>Below 4</h1></div>
  </div>

  <!-- Footer -->
  <div id="footer-wrapper" class="column3">
    <div class="footer-col"><h1>Footer 1</h1></div>
    <div class="footer-col"><h1>Footer 2</h1></div>
    <div class="footer-col"><h1>Footer 3</h1></div>
  </div>