Improve card DOM order and use more semantic HTML

Created by: masi

The first element in a widget should always be it's title. If you want to make the image on top I see a simple solution.

Use CSS-order to modify the visual appearance (card is already a flex element):

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
  </div>
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

The required CSS:

.card-img-top {
  order: -1
}

.card-img-top + .card-body {
  padding-top: 0;
}