Default configuration of the Blog Module displays the Image, Title, meta information, Excerpt, and, optionally, a button stacked one beneath the other. To order them differently with CSS follow these steps:
Go to the Blog module -> Advanced tab -> CSS Class and add a new CSS class. In our example we will use et_blog_reorder CSS class.
For more details on how to add a custom CSS class, you can also visit this article: How To Add Additional CSS Classes To Divi Modules.
Insert the below CSS code into Theme Options > Custom CSS box and click the green "Save Changes" button to save changes:
/* Set the order of the post title */
.et_blog_reorder .et_pb_post .entry-title {
order: 1;
}
/* Set the position of the featured image and its container */
.et_blog_reorder .et_pb_post .et_pb_image_container,
.et_blog_reorder .et_pb_post .entry-featured-image-url {
order: 3;
}
/* Rearrange the post meta information */
.et_blog_reorder .et_pb_post .post-meta {
order: 2;
}
/* Modify the placement of the post content */
.et_blog_reorder .et_pb_post .post-content {
order: 4;
}
/* Reorganize the layout of blog posts within the .et_blog_reorder container */
.et_blog_reorder .et_pb_post {
display: flex;
flex-direction: column;
}
This CSS code will create a display order: Title, Meta, Image, and rest of the content, as seen in the screenshot below:
You can experiment with the positions of the elements by changing "order" in the CSS code.