title: Truly responsive content column with sidebar without media queries
body: <p>I am trying to make a responsive basic layout with a content-box (which has 3 columns) and a sidebar. The current problem I have is defining a margin on when the sidebar is on the right side and when the sidebar goes under the grid. Currently, I have no margin, but I would like to have 20px (for example) margin when the sidebar is on the right side and 50px when the sidebar is under the grid (or 20px so it is the same). Also <code>.sidebar</code> should be full width when on a new line. Here is my code:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0;"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;style&gt;
              .main {
                  display: flex;
                  flex-wrap: wrap;
                  width: 100%;
                  background: yellow;
              }
              .main .six-col {
                  flex: 1 1 auto;
                  display: grid;
                  justify-content: space-between;
                  column-gap: 15px;
                  background: red;
                  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
              }
              .main .six-col .col { border: 1px white solid;}
              .main .sidebar {
                  flex: 0 0 250px;
                  background: green;
              }
          &lt;/style&gt;
          &lt;div class="main"&gt;
              &lt;div class="six-col"&gt;
                  &lt;div class="col"&gt;asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad &lt;/div&gt;
                  &lt;div class="col"&gt;asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad &lt;/div&gt;
                  &lt;div class="col"&gt;asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad &lt;/div&gt;
                  &lt;div class="col"&gt;asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad &lt;/div&gt;
                  &lt;div class="col"&gt;asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad &lt;/div&gt;
                  &lt;div class="col"&gt;asdsad d asd asad ad sadas sad asd asd asd sad sad asd asd asd asd asd sad &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="sidebar"&gt;
                  sidebar
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Can this be achieved without media queries?</strong> </p>