How to change order of elements in a flexbox column?

Question

When elements are sorted by column, they go down the left column and then down the right.

How do you configure flexbox to display elements going down vertically rather than in columns?

e.g. I want the bottom configuration here, not the top:

I've looked into flex-direction with no success. Is this even possible with flexbox?

I have this currently:

#flex-container {
  background-color: #000;
  width: 100%;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  text-align: center;
}
.flex-element {
  display: inline-block;
  width: 100%;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  -webkit-column-gap: 10px;
  margin-bottom: 10px;
  background-color: #fff;
}

<div id="flex-container">
  <div class="flex-element">
    <p>1</p>
  </div>
  <div class="flex-element">
    <p>2</p>
  </div>
  <div class="flex-element">
    <p>3</p>
  </div>
  <div class="flex-element">
    <p>4</p>
    <p>--</p>
  </div>
  <div class="flex-element">
    <p>5</p>
    <p>--</p>
    <p>--</p>
  </div>
  <div class="flex-element">
    <p>6</p>
  </div>
  <div class="flex-element">
    <p>7</p>
  </div>
</div>

https://jsfiddle.net/ckecz95r/

Answer 1

It seems that what you're looking for is a row alignment with wrapping after every two items. This will create a column with two items per row, and the numbering will go left-right, left-right, etc., instead of down one column, then down the next column.

First, make the div a flex container:

#flex-container {
    display: flex;          /* create flex container */
    flex-direction: row;    /* default rule; can be omitted */
    flex-wrap: wrap;        /* overrides default nowrap */
    width: 100%;
}

Then, specify that each flex item should cover 50% of the container width:

.flex-element {
    flex-basis: calc(50% - 20px);  /* take 50% width less margin */
    align-self: flex-start;        /* disable stretch default height */
    margin: 10px;                  /* for demo purposes */
    background-color:#fff;         /* for demo purposes */

Revised Demo