Make 2 columns on mobile instead of one

it is much easier to select such elements if they were separated only in one surrounding container.
Means if they were alone f.e. in one color-section. – next we do not need on grid-layout or on flex-layout the need to set same height option – we can do that on different ways.
It is alway a good practice to have for special solutions a unique selector – means f.e. a unique ID or class on that surrounding container.

so now let all as it is and put this to your child-theme quick css:

#top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table .av-flex-placeholder {
  display: none !important
} 

#top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table {
  display: grid !important;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
} 

#top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table .flex_column {
  width: unset !important;
  margin: 0 !important
} 

@media only screen and (min-width:560px) and (max-width: 989px){
  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  } 

  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table > .flex_column:nth-of-type(n+6) {
    left: calc(50% + 10px) /*** just if you like to center last 2 items *****/
  }
}

@media only screen and (min-width:320px) and (max-width: 559px){
  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  } 
  
  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table .flex_column:last-of-type  {
    left: calc(50% + 5px) /*** just if you like to center last item *****/
  }
  
  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table .flex_column p {
    font-size: 17px;
    line-height: 24px
  } 
}

@media only screen and (max-width: 319px){
  #top.page-id-5864 #av_section_2 .entry-content-wrapper .flex_column_table  {
    display: grid !important;
    grid-template-columns: 1fr; 
    gap: 10px;
  }   
}

5 to 3/2 to 2/2/1 screen sizes lower than 320px will end in 1 column layout.
just shrink your window size to see what happens on responsive case.

Just for Info – no need to read

If you inspect the DOM in Chrome, for example, and click on the grid next to the grid container, the grid layout is displayed in the frontend.
Here you can see very clearly how a grid layout is structured. These hatched lines are the “gaps” – whereby you could even distinguish between row-gap and column-gap. And an ingenious feature is that gaps are only ever set between elements; if there is no neighbour, there is no gap.

You see now with the 3 column grid that I shift the 4th and the 5th element out of the grid, by ( 50% minus half the gap value).

_________________
PS:
The numbers could also be used – e.g. by giving the first item an extension. So grid-column: 1 / 3;
would mean that the item extends from line 1 to line 3. (borrowing a little from the table layout, there is also the possibility of defining a span. Span 2 extends over 2 widths or heights.