.container {
     max-width: 1200px;
     margin: 0 auto;
 }
 
 .row {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
 }
 
 .column {
     flex-basis: 100%;
 }
 
 @media screen and (min-width: 800px) {
     .column {
         flex: 1;
     }
     @media screen and (min-width: 800px) {
         ._25 {
             flex: 2.5;
         }
         ._55 {
             flex: 5.5;
         }
         ._20 {
             flex: 2;
         }
     }
 }
 /*
 <div class="container">
    <!-- rows and columns -->
</div>

<div class="row">
    <div class="column">
        <!-- 100% width -->
    </div>
</div>

<div class="row">
    <div class="column">
        <!-- 50% width -->
    </div>
    <div class="column">
        <!-- 50% width -->
    </div>
</div>

<div class="row">
    <div class="column">
        <!-- 33.33% width -->
    </div>
    <div class="column">
        <!-- 33.33% width -->
    </div>
    <div class="column">
        <!-- 33.33% width -->
    </div>
</div>

<div class="row">
    <div class="column _25">
        25% Left Sidebar
    </div>
    <div class="column _55">
        55% Main Content
    </div>
    <div class="column _20">
        20% Right Sidebar
    </div>
</div>
 */