I'm trying to wrap elements in a column direction. My first element is 100% wide and all other elements are 50% wide. When it comes time to wrap, the last few elements wrap beginning from the first element that is 100% wide instead of going down to the second line.

JSFiddle link: <https://jsfiddle.net/e4j16apg/>

This is what I'm trying to achieve:
[![enter image description here](https://i.stack.imgur.com/Yoqfa.png)](https://i.stack.imgur.com/Yoqfa.png)

```css
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  box-sizing: border-box;
  height: 200px;
  width: 50%;
  border: 1px solid blue;
}

.ca {
  width: 50%;
  border: 1px solid red;
}

.ca-1 {
  height: 50px;
  width: 100%;
  border: 1px solid green;
}
```

```html
<div class="container">
  <div class="ca ca-1">ca-1</div>
  <div class="ca ca-2">ca-2</div>
  <div class="ca ca-3">ca-3</div>
  <div class="ca ca-3">ca-3</div>
  <div class="ca ca-4">ca-4</div>
  <div class="ca ca-5">ca-5</div>
  <div class="ca ca-6">ca-6</div>
  <div class="ca ca-7">ca-7</div>
  <div class="ca ca-8">ca-8</div>
  <div class="ca ca-9">ca-9</div>
  <div class="ca ca-10">ca-10</div>
</div>
```

Thank you so much!