JSFiddle - React, Tailwind, and code Playground

by Pedro Cruz

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>The Impossible CSS Layout</title>
  </head>
  <body>
    <div class="wrapper">
      <img src="https://source.unsplash.com/random" />
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos
        iusto consequuntur tempora facilis
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos
        iusto consequuntur tempora facilis
      </p>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos
        iusto consequuntur tempora facilis
      </p>
      <img src="https://source.unsplash.com/random" />
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos
        iusto consequuntur tempora facilis
      </p>
      <ul>
        <li>Lorem, ipsum dolor.</li>
        <li>Atque, officiis repellat!</li>
        <li>Est, itaque incidunt.</li>
      </ul>
      <img src="https://source.unsplash.com/random" />
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos
        iusto consequuntur tempora facilis
      </p>
    </div>
  </body>
</html>

<!--

<div class="wrapper">
      
      
      
      
      
      
      
      
      
    <div class="left">
      <img src="https://source.unsplash.com/random">
      <img src="https://source.unsplash.com/random">
      <img src="https://source.unsplash.com/random">
    </div>
    <div class="right">
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos
        iusto consequuntur tempora facilis
      </p><p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos
        iusto consequuntur tempora facilis
      </p><p>
        Lorem ipsum dolor, sit amet consectetur adipisicing...

CSS

.wrapper {
  max-width: 500px;
  display: grid;
  grid-template-columns: 1;
  grid-gap: 20px;
}

.wrapper img {
  max-width: 100%;
}

@media screen and (min-width: 768px) {
  .wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

JavaScript

let wrapperClone = ""

function columnize() {
if(!document.querySelector('.left')){
	const grid = document.querySelector('.wrapper')
  
  if(window.matchMedia("(min-width: 768px)").matches) {
    wrapperClone = grid.cloneNode(true)
  }
  
  // Array for left side
  const picks = Array.from(grid.children).filter(el => el.matches("img"));
  
  // Array for right side
  const everythingElse =  Array.from(grid.children).filter(el => !el.matches("img"));
   
   const left = document.createElement('div');
   left.classList.add('left');
   picks.forEach(el => left.appendChild(el))
   
   const right = document.createElement('div')
   right.classList.add('right')
   everythingElse.forEach(el => right.appendChild(el))
   
   // Append to DOM
   grid.appendChild(left)
   grid.appendChild(right)
   }
}

function putItBack(clone) {
	if(document.querySelector('.left')) {
  	const grid = document.querySelector('.wrapper')
    while (grid.firstChild) {
    	grid.removeChild(grid.firstChild)
    }
    clone = Array.from(clone.children)
    clone.forEach(el => grid.appendChild(el))
  }
}



function resizeWindow() {
	if (window.matchMedia("(min-width: 768px)").matches) {
  	columnize()
  }else{
  	putItBack(wrapperClone)
  }
}

resizeWindow();
window.addEventListener('resize', resizeWindow)