I'm trying to achieve a responsive layout that looks like this on desktop:

[![Desktop layout](https://i.stack.imgur.com/wANu5m.png)](https://i.stack.imgur.com/wANu5m.png)

And like this on mobile:

[![Mobile layout](https://i.stack.imgur.com/gxWunm.png)](https://i.stack.imgur.com/gxWunm.png)

Note the following requirements:

* Sidebar should only take up as much space vertically as is necessary to fit the content. Below the sidebar, content from the main section should take up the full width.
* On mobile, the sidebar should appear below the main content.

Here is a jsfiddle containing my initial HTML and CSS:

<https://jsfiddle.net/sergkr/np6k2tj3/>

and a snippet:

```css
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  padding: 0 2em;
  line-height: 1.4;
  color: #333;
  background-color: #fff
}

section {
  margin: 1.6em 0;
}

section>h2 {
  margin: 0;
  padding: 12px 24px;
  font-size: 16px;
  background: #eceeee;
  text-transform: uppercase;
}

section>p {
  margin: 0;
  padding: 12px 24px;
  background: #fafafa;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

main {
  flex-basis: 100%;
}

.sidebar {
  padding: 0 2em;
  background: #fbf6f4;
}

@media screen and (min-width: 1024px) {
  .container {
    flex-wrap: nowrap;
  }
  main {
    flex: 1 1 70%;
  }
  .sidebar {
    flex: 0 0 30%;
    margin-left: 2em;
  }
}
```

```html
<div class="container">
  <main>
    <h1>Main</h1>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa eaque hic voluptates quas minus minima, officiis, quaerat animi illum dolor est ipsum maiores sunt sint, velit consequatur illo perspiciatis magni!
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum placeat animi illum, a cumque ab illo soluta saepe dicta, deleniti voluptatibus ratione modi pariatur laudantium, nulla libero earum, ea molestias.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem sapiente labore eos quia assumenda quod perspiciatis odio sit, hic incidunt, eum, inventore qui veniam ex iure voluptatum deleniti accusamus quidem.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quasi laudantium neque, dolor illo repellat totam fugiat veritatis sit harum, quam asperiores error minima ducimus id. Repellat ea, omnis veniam.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste vel harum, ratione voluptas qui odit ea ipsum ipsa distinctio laborum? Ut voluptate, accusantium alias, autem hic dignissimos corporis quas cum!
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum praesentium, aut! Nam officiis tempora reprehenderit, dignissimos minus voluptatum ullam. Doloremque quis dolorem tempora incidunt maiores iusto similique cumque atque repellendus?
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est ab fugit repellendus exercitationem, incidunt perspiciatis, accusamus deserunt dolores molestias odio tenetur iure nesciunt! Officiis debitis, cumque impedit odit vero earum.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores ratione doloribus repellat molestias dolorum quae, iste, quo corrupti impedit consequuntur quod ex magnam recusandae dolorem dignissimos incidunt, ducimus, quia ipsum.
      </p>
    </section>
  </main>
  <div class="sidebar">
    <h1>Sidebar</h1>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam deleniti officia nobis atque voluptatum maxime voluptas ipsum rerum accusantium repudiandae quae quia, quam quis. Consectetur dolorem excepturi assumenda reprehenderit accusantium.
      </p>
    </section>
    <section>
      <h2>Section</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos ab laborum numquam dolore eius, aperiam amet cumque. Laboriosam aut at cupiditate quis ea blanditiis eveniet, dolorum. Autem at, quisquam dolorem.
      </p>
    </section>
  </div>
</div>
```

Note there is wasted space below the sidebar. I want the main content to wrap around and take up the full width after the sidebar ends, but I'm not sure how to achieve that.

I thought about using `float: right` on the sidebar and putting it before the `<main>`, but that results in the sidebar appearing first on mobile (I want it to appear after the content).

Is there a way to achieve the desired layout given the above requirements, either using flexbox, float, or some other technique?