Alignment on two rows in display flex - css

Question

I'm trying to pass the last two items over each other as shown on the bottom of this photo.
Is this possible as is by forcing a line break or do I have to change the display of the parent div?
The HTML structure looks like this :
<div class="wp-block-cover">
<ul class="articleslisteshp" id="lcp_instance_0">
<li>
<a>Lorem ipsum article title</a>
<span class="testcat" style="width: 100%;">
<a>Category1</a>
<a>Category2</a>
</span>
<a><img width="150" height="150"></a>
</li>
</ul>
</div>
Et voici le CSS que j'ai essayé :
ul.articleslisteshp{
display: flex;
flex-direction: column;
}
ul.articleslisteshp > li{
display: flex;
flex-direction: row-reverse;
}

Answer 1

I would take out the a tag from inside the list if possible and put it outside of it. Like so:
<div class="wp-block-cover">
<ul class="articleslisteshp" id="lcp_instance_0">
<a><img width="150" height="150"></a>
<li>
<a>Lorem ipsum article title</a>
<span class="testcat" style="width: 100%;">
<a>Category1</a>
<a>Category2</a>
</span>
</li>
</ul>
</div>
And use the following CSS to achieve what you asked for:
ul.articleslisteshp{
display: flex;
flex-direction: row;
}
ul.articleslisteshp > li{
display: flex;
flex-direction: column-reverse;
}
span.testcat {
display: flex;
flex-direction: column;
}