Making 5 columns into 2 columns on mobile?

Hello!

I’ve got a page that includes a section with 2 rows of 5 columns, like so:

A B C D E
F G H I J

I’ve tried using the code in the documentation to adjust this layout on mobile to 2 columns, this code:

@media only screen and (max-width:767px) {
.col-25p {
width:49%!important;
background:gold;
}
.col-25p.av_one_fifth{
margin-left:1%!important;
}}

The above code results in the following arrangement on mobile, where the 5th column from each original row is orphaned:

A B
C D
E
F G
H I
J

What I want instead is

A B
C D
E F
G H
I J

Can you help me find a good fix for this? Thanks so much!