update: rearrange four divs to fit small mobile, large mobile, pad and computer screen if wordcount is enabled.
MODIFY
layout/_partial/post-detail.ejs
layout/_partial/post-detail.ejs
</div>
<div class="post-info">
- <span class="post-date">
+ <div class="post-date info-break-policy">
<i class="fa fa-calendar-minus-o fa-fw"></i><%- __('publishDate') %>:&nbsp;&nbsp;
<%- date(page.date, 'YYYY-MM-DD') %>
- </span>
+ </div>
<% if (theme.wordCount.enable) { %>
<% if (theme.wordCount.postWordCount) { %>
- <span class="post-word-count">
+ <div class="info-break-policy">
<i class="fa fa-file-word-o fa-fw"></i><%- __('wordCount') %>:&nbsp;&nbsp;
<%= wordcount(page.content) %>
- </span>
+ </div>
<% } %>
<% if (theme.wordCount.min2read) { %>
- <span class="post-word-count">
+ <div class="info-break-policy">
<i class="fa fa-clock-o fa-fw"></i><%- __('readTimes') %>:&nbsp;&nbsp;
<%= min2read(page.content) %> <%= __('Minutes') %>
- </span>
+ </div>
<% } %>
<% } %>
<% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %>
- <span id="busuanzi_container_page_pv" class="post-read">
+ <div id="busuanzi_container_page_pv" class="info-break-policy">
<i class="fa fa-eye fa-fw"></i><%- __('readCount') %>:&nbsp;&nbsp;
<span id="busuanzi_value_page_pv"></span>
- </span>
+ </div>
<% } %>
</div>
</div>
- <hr>
+ <hr class="clearfix">
<div class="card-content article-card-content">
<div id="articleContent">
<%- page.content %>

MODIFY
source/css/matery.css
source/css/matery.css
@@ -1628,3 +1628,39 @@ footer .copy-right {
line-height: 48px;
font-size: 1.8rem;
}
+
+@media screen and (min-width: 368px) and (max-width: 767px) {
+ .info-break-policy {
+ word-break: keep-all;
+ float: left;
+ width: 50%;
+ }
+}
+
+@media screen and (min-width: 768px) {
+ .info-break-policy {
+ word-break: keep-all;
+ float: left;
+ margin-right: 15px;
+ }
+}
+
+@media screen and (max-width: 367px) {
+ .info-break-policy {
+ word-break: keep-all;
+ float: left;
+ width: 100%;
+ }
+
+ .custom-card {
+ padding: 0 2px !important;
+ }
+}
+
+.info-break-policy {
+ margin-bottom: 8px;
+}
+
+.clearfix {
+ clear: left;
+}

update: rearrange four divs to fit small mobile, large mobile, pad and computer screen if wordcount is enabled.