Flex-Flow - folding 2nd column under 1st, and 4th column under 3rd

Question

I'm using flexbox to create a table that will display differently on 3 screen sizes.

I'm struggling to work out how to achieve the Mid-size view, by collapsing the 2nd column under the 1st and the 4th under the 3rd in order to achieve the layout shown below.

I think flex-flow: column wrap should work but I can't get it working. Does anyone have any tips?

(Also realise it's a bit messy for me to manually split the array in half using JS before pulling them into the flexbox. I started with two arrays 2021 and 2022 and split them in half, but there is probably a better way of doing it)

Large width desktop (4 columns)

2020  |       | 2021  |       |
a.    | g.    | a.    | g.    |
b.    | h.    | b.    | h.    |
c.    | i.    | c.    | i.    |
d.    | j.    | d.    | j.    |
e.    | k.    | e.    | k.    |
f.    | l.    | f.    | l.    |
etc   | etc   | etc   | etc   |

Mid-size (collapse into 2 columns)

2020  | 2021  |
a.    | a.    |
b.    | b.    |
c.    | c.    |
d.    | d.    |
e.    | e.    |
f.    | f.    |
etc   | etc   |

Small (1 col for mobile)

2020. | 
a.    | 
b.    | 
c.    |
d.    | 
e.    | 
f.    | 
etc   | 

2021. |
a.    | 
b.    | 
c.    |
d.    | 
e.    | 
f.    | 
etc   | 

Current html

<div className="flexEven">
    <div className="graduateYearColumn">
        <h1 className="yearTitle">2020.</h1>
        {firstHalfTwentyTwenty.map(person => {
            return (
                <div>
                    <h3 className="graduateName">{person.artist}</h3> 
                    <h3 className="graduateEmail">{person.email}</h3>    
                </div>
            )
        })}
    </div>
    <div className="graduateYearColumn bottom">
        {secondHalfTwentyTwenty.map(person => {
            return (
                <div>
                    <h3 className="graduateName">{person.artist}</h3> 
                    <h3 className="graduateEmail">{person.email}</h3>    
                </div>
            )
        })}
    </div>
    <div className="graduateYearColumn">
        <h1 className="yearTitle">2021.</h1>
        {firstHalfTwentyTwentyOne.map(person => {
            return (
                <div>
                    <h2 className="graduateName">{person.artist}</h2>
                    <h3 className="graduateEmail">{person.email}</h3>
                </div>
            )
        })}
    </div>
    <div className="graduateYearColumn bottom">
        {secondHalfTwentyTwentyOne.map(person => {
            return (
                <div>
                    <h2 className="graduateName">{person.artist}</h2>
                    <h3 className="graduateEmail">{person.email}</h3>
                </div>
            )
        })}
    </div>
</div>

Answer 1

You just have to apply flex-direction according to viewport

body {
  background-color: brown;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

.child {
  padding: .25rem;
  background-color: antiquewhite;
  margin: .25rem;
  border-radius: 8px;
}


/* MEDIUM DEVICES */

@media only screen and (min-width: 768px) {
  body {
    background-color: blueviolet;
  }
  .wrapper {
    flex-direction: row;
  }
  .parent-container {
    flex: 1;
  }
}


/* LARGE DEVICES */

@media only screen and (min-width: 992px) {
  body {
    background-color: orange;
  }
  .parent-container {
    display: flex;
  }
  .child-container {
    flex: 1;
  }
  .child-container+.child-container {
    margin-top: 2.65rem;
  }
}

<div class="wrapper">
  <div class="parent-container">
    <div class="child-container">
      <h2>2020</h2>
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div class="child">4</div>
      <div class="child">5</div>
      <div class="child">6</div>
    </div>
    <div class="child-container">
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div class="child">4</div>
      <div class="child">5</div>
      <div class="child">6</div>
    </div>
  </div>
  <div class="parent-container">
    <div class="child-container">
      <h2>2020</h2>
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div class="child">4</div>
      <div class="child">5</div>
      <div class="child">6</div>
    </div>
    <div class="child-container">
      <div class="child">1</div>
      <div class="child">2</div>
      <div class="child">3</div>
      <div class="child">4</div>
      <div class="child">5</div>
      <div class="child">6</div>
    </div>
  </div>
</div>