JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="item">
  <div class="item__img">
    <img src="http://via.placeholder.com/150x150" alt="">
  </div>
  <div class="item__heading">
    <h2 class="item__title">Titre</h2>
    <div class="item__category">
      Catégorie
    </div>
  </div>
  <div class="item__content">
    Eminuit autem inter humilia supergressa iam impotentia fines mediocrium delictorum nefanda Clematii cuiusdam Alexandrini nobilis mors repentina; cuius socrus cum misceri sibi generum, flagrans eius amore, non impetraret, ut ferebatur, per palatii pseudothyrum
    introducta, oblato pretioso reginae monili id adsecuta est, ut ad Honoratum tum comitem orientis formula missa letali omnino scelere nullo contactus idem Clematius nec hiscere nec loqui permissus occideretur.
  </div>
</div>

SCSS

.item {
  overflow: hidden; // on rétablit le flux suite au passage de `.item__img` en float
}

.item__img {
  float: left; // on positionne l'image à gauche
}

.item__content {
  overflow: hidden; // permet d'éviter que le contenu glisse sous l'image
}

@media screen and (max-width: 500px) {
  .item {
    display: flex; // On passe le conteneur en flex
    flex-direction: column; // et on le positonne en colonne
  }
  // On modifie l'ordre des élements pour que le titre et la catégorie apparaissent en premier
  .item__img {
    order: 2;
  }
  .item__heading {
    order: 1;
  }
  .item__content {
    order: 3;
  }
  .item__img {
    float: none; // On annule le float sur l'image
  }
  .item__heading {
    // On crée un conteneur flexbox pour inverser le titre et la catégorie
    display: flex;
    flex-direction: column-reverse; // On utilise column-reverse pour inverser l'ordre d'affichage
  }
}



























*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}