How to move the Divi blog module items with custom ordering using CSS.

TIPS

Dec 7, 2022 | Divi Tips | 0 comments

Steps to move the Divi blog module items with custom ordering using CSS. Step 1: Add the class customBlogOrder to your blog module. Step 2: Update the 4 “order” values in the CSS to your preferred order. Step 3: Add the custom CSS to the Divi theme options / Custom CSS area. Scroll down to see what it looks like using a Divi blog module with the below code where the meta info is moved to the second spot instead of the default third spot.

[css]
/* moving info on blog module BEGIN */
/*make the parts of the blog post flexible*/
.customBlogOrder .et_pb_post {
	display: flex;
	flex-direction: column;
}
/*blog post featured image*/
.customBlogOrder .et_pb_post .et_pb_image_container, .customBlogOrder .et_pb_post .entry-featured-image-url {
	order: 1;
}
/*blog post title*/
.customBlogOrder .et_pb_post .entry-title {
	order: 3;
}
/*blog post meta*/
.customBlogOrder .et_pb_post .post-meta {
	order: 2;
}
/*blog post excerpt and button*/
.customBlogOrder .et_pb_post .post-content {
	order: 4;
}
/*remove negative margin on blog image*/
.customBlogOrder .et_pb_blog_grid .et_pb_image_container {
	margin: 0!important;
}
/*adjust margin below blog post featured image*/
.customBlogOrder .et_pb_post .entry-featured-image-url {
	margin-bottom: 10px;
}
/* moving info on blog module END */
[/css]

Here’s what it looks like: