0

I want to show date below the blog title using css. I cannot edit its HTML.

Current order is: date, title, excrept, read more.
I want to show it as: title, date, excrept, read more.

I tried using inline-block but nothing happens.

   <div class="exad-post-grid-body">
       <ul class="exad-post-data show-avatar-no">
          <li class="exad-post-date"><span><a href="https://mytimios.ml/goodness-of-cumin-for-children/" class="exad-post-grid-author-date">October 7, 2020</a>
             </span>
          </li>
       </ul>
       <h3><a href="https://mytimios.ml/goodness-of-cumin-for-children/" class="exad-post-grid-title">Goodness of Cumin for Children</a></h3>
       <div class="exad-post-grid-description">As we all know, cumin is one of the spices that has been used since generations, across cultures. It is...</div>
       <div class="exad-post-footer"><a href="https://mytimios.ml/goodness-of-cumin-for-children/" class="read-more">+ READ MORE</a></div>
    </div>
ATP
  • 2,939
  • 4
  • 13
  • 34
Anjly Shines
  • 47
  • 4

1 Answers1

1

You could try converting exad-post-grid-body to become a Flex container and reorder its subsequent Flex child as needed using the order property from Flex. But you might need to readjust several properties to retain the current design after converting it to Flex

nadhif
  • 46
  • 4
  • Working now. Thanks :) Here is the code I used. .exad-post-grid-body { display: flex; flex-direction:column; } .exad-post-grid-body :nth-child(1) { order: 2; } .exad-post-grid-body :nth-child(2) { order: 1; } .exad-post-grid-body :nth-child(3) { order: 4; } .exad-post-grid-body :nth-child(4) { order: 4; } – Anjly Shines Jan 30 '21 at 18:04