Responsive columns in Dara Theme

I have a column block with 3 columns and 4 rows. When the viewport is full size it displays correctly. They look like:

1 2 3
4 5 6
7 8 9
10 11

When it is mobile phone size the items stack as one across, which is fine.

However, when the viewport is sized approx. tablet portrait size (599px to 781px wide) the columns, 2 across, display as:

1 2
4 5
7 8
10
3
6
9
11

I’ve tried various CSS customizations using @media queries and targeting .wp-block-columns and .wp-block-column but cannot get the last 5 blocks to stack two x two. Can anyone assist with this?

TIA.

The page I need help with: [log in to see the link]