Article list image above titles and text?

What do you mean by "over the article titles and excerpt text?"

I don't get that? Why would you want the image to cover (obscure) the title text?

Right. When you said 'over the title' it sounded wrong. I see you edited it to say 'above the title text' now.

#tpl_wcf_articleList {
    .box128 {
        display: flex;
        flex-wrap: wrap;
    }
}

Should do the trick.

Btw: Use margin-top: 1%; in class .articleList > li:not(:first-child) instead of margin-top: 0px;, to keep the two boxes at the same height.

Before:

After:

With flex-wrap: wrap; :

Looks like a bit of extra spacing could do with being added below the image to shove the forum title down a little. As it's sitting flush right below the image and doesn't really match the same spacing used between title and Yesterday 1:45pm, etc

Try my css part and let me see, if it works. You can just simply comment out your current part, or backup it in a textdocument.

/* ================================================================ Articel lists besides */
@include screen-lg {
    .articleList {
        display: flex;
        flex-wrap: wrap;
        margin-left: -1%;
        margin-right: -1%;
        .box128 {
            flex-wrap: wrap;
        }
    }
    .articleList > li {
        width: 50%;
        flex: 0 0 48%;
        max-width: 48%;
        border: 1px solid $wcfContentBorderInner;
        margin: 1%;
        padding: 2%;
        min-height: 200px;
    }
    .articleList > li:not(:first-child) {
        margin: 1%;
    }
}

Quote from PJK

Everything needs a little margin tweaking but it's displaying the way I wanted it to

And you can fix the overlay area with this part:

[Blocked Image: https://i.imgur.com/PYorZKQ.gif]

(filesize to big for file notes)

I haven't tested it, but I would place the code inside here:

.articleList {
        display: flex;
        flex-wrap: wrap;
        margin-left: -1%;
        margin-right: -1%;
        .box128 {
            flex-wrap: wrap;
        }
        // Overlay Fix
        .box128 > :first-child:not(:last-child) {
            flex: 0 0 100%;
            margin-right: 0;
    }
}

Quote from PJK

In Firefox the two articles in the right column seem to run together, do you know how to fix that?

I will take a look at it in the next 20 minutes.

Ok, it seems like firefox got problems with margin percentages, but it isn't a big deal, to use px instead of %.

.articleList > li {
    background-color: #f3f3f3;
    width: 50%;
    flex: 0 0 48%;
    max-width: 48%;
    margin: 10px;
    padding: 20px;
    min-height: 200px;
}
.articleList > li:not(:first-child) {
    margin: 10px;
}

I hope it works, because I only tested it with the developer tools.

Quote from Aze

I will take a look at it in the next 20 minutes.

It's nice to see people help in the thread that actually know what they are doing. Instead of people spouting off nonsensical suggestions none stop. The suggestions have helped me sort out some things. Thanks.