title: CSS move element when hovering on previous div
body: <p>I'm trying to make a site that uses a "grid" that looks just like the one on www.uve.info/en/ (middle of the page, under "Services") and has the same effect while hovering.</p>
  
  <p>I've made divs with classes "black-cell", "grey-cell" and "white-cell" and ordered them the same way they did. White cells have a negative z-index and are moved left (odd rows) or right (even rows) by 33%. That way, they stay invisible under grey or black cells.</p>
  
  <p>It's easy to get the desired result on odd rows:</p>
  
  <pre><code>.grey-cell:hover + .odd
      visibility: visible
      right: 0
  </code></pre>
  
  <p>, but the problem arises when I try to do the same thing with white cells in even rows because the HTML structure is different (white cell - black cell - grey cell) and I can't target the previous div.</p>
  
  <p>Unfortunately, I can't use flexbox to change the order of elements due to some reasons that are not important for this topic. I've tried using jquery function "insertBefore", but it changes the HTML structure and doesn't help here.</p>
  
  <p>So, is there a way to change the order of the elements without flexbox, OR to target the previous div with CSS/SASS?</p>