JSFiddle - React, Tailwind, and code Playground

by mistakster

HTML

<p>Change window size to see what will happen with objects</p>

<div>
  <item-rank-1 class="item">Object “A”</item-rank-1>
  <item-rank-1 class="item">Object “B”</item-rank-1>
  <item-rank-0 class="item">Object “C”</item-rank-0>
</div>

CSS

.item { display: block; }
.item:last-child { font-weight: bold; }

@media (max-width: 600px) {
  item-rank-0.item { display: none; }
  item-rank-1:last-of-type { font-weight: bold; }
}