How can I split list items across columns and rows? - flexbox

Question

I'm trying to create a responsive layout with Bootstrap. I have a list need to split the items across 2 columns and 2 rows.
<ul>
<li>item 1</>
<li>item 2</>
<li>item 3</>
<li>item 4</>
</ul>
so my ul css - flex-direction: row;
which lists the items in a row side each other
then at a media query - css flex-direction: column;
so they stack on top of each other
I would like the 3rd and 4th item to be like this so bascialy 2 columns
Is this possible?
<ul>
<li>item 1</> <li>item 3</>
<li>item 2</> <li>item 4</>
</ul>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<ul>
<li>item 1</>
<li>item 2</>
<li>item 3</>
<li>item 4</>
</ul>

Answer 1

We can't split list items into a grid since that would require invalid HTML. However, we can extend Bootstrap's sizing utilities for our purposes. We'll align them with Bootstrap's breakpoints.
There may be a simpler way to employ flexbox here to wrap appropriately, but I haven't come up with it.
#media (min-width: 576px) and (max-width: 767px) {
.w-100.w-sm-50 {
width: 50% !important;
}
}
#media (min-width: 768px) {
.w-100.w-md-25 {
width: 25% !important;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<ul class="d-flex flex-wrap">
<li class="w-100 w-sm-50 w-md-25">item</li>
<li class="w-100 w-sm-50 w-md-25">item</li>
<li class="w-100 w-sm-50 w-md-25">item</li>
<li class="w-100 w-sm-50 w-md-25">item</li>
</ul>