How can i change my homepage Post list into something like this

Hi there,

first off add this PHP snippet to move the meta below the excerpt:

add_filter( 'generate_header_entry_meta_items', function( $items ) {
    if ( is_home() || is_archive() ) {
        $items = array(
            '',
        );
    } return $items;
} );

add_filter( 'generate_footer_entry_meta_items', function( $items ) {
    if ( is_home() || is_archive() ) {
        $items = array(
            'author',
            'date',
        );
    } return $items;
} );

With this CSS to style it:

body:not(.single) footer.entry-meta .author {
    font-size: 0;
}

body:not(.single) footer.entry-meta .author a,
body:not(.single) footer.entry-meta .posted-on {
    font-size: 12px;
}

body:not(.single) footer.entry-meta .author a:after {
    content: '•';
    margin-left: 5px;
}

body:not(.single) footer.entry-meta span {
    display: inline;
}

.blog footer.entry-meta,
.archive footer.entry-meta {
    display: block !important;
    margin-top: 0.25em;
}

.entry-summary {
    margin-top: 0.25em;
}

body:not(.single) article:not(:first-child) .inside-article {
    padding-top: 5px;
}

body:not(.single) .post .inside-article {
    padding-bottom: 5px;
}

@media (max-width: 768px) {
    body:not(.post-image-aligned-center) .inside-article .post-image {
        margin-right: 1em;
        margin-bottom: 1em;
        float: left;
        text-align: left;
    }

    .post-image-aligned-left .post-image img {
        max-width: 100px;
    }

    .entry-summary {
        display: none;
    }

    .blog header.entry-meta,
    .archive header.entry-meta {
        display: none;
    }

    .blog footer.entry-meta,
    .archive footer.entry-meta {
        line-height: 1;
    }

    .blog .entry-title,
    .archive .entry-title,
    .search .entry-title {
        font-size: 16px;
    }
}

Once thats done let me know so i can take a look at the layout.

Done please have a look now...

Can you:
1. Flush and disable Autoptimize
2. I updated the CSS here

yes it worked but is not same on mobile device... Please check the mobile device look on both sites..

And one more thing author name and date bth have different font size as well as there is too match gap between each post...

As well as when i added the PHP code there is a code appearing athe bottom of single article - click here to check screenshot and i am 100% sure this is coming bcz of the code because when i remove the code it disappear.

I updated the snippet and the CSS above.

Hey David it worked nicely, but for mobile device how can i change the font size, i am using this code for which is applying for all devices including desktop and mobile.

.blog .entry-title, .archive .entry-title, .search .entry-title {
    font-size: 18px;
	Font-weight:550;
} 

So is there any way to reduce the font size of title on mobile as well as any way to reduce the gap between title and meta info in mboile devices.

CSS updated.

Thanks for your big help david, everything is fixed..

You're welcome