<section class="grid">
  <div class="grid-item grid-item--image">
    <img src="https://images.unsplash.com/photo-1697947656193-a87d460b5fb5?q=80&w=1812&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
  </div>
  <div class="grid-item grid-item--text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
</section>
<section class="grid">

  <div class="grid-item grid-item--text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  <div class="grid-item grid-item--image">
    <img src="https://images.unsplash.com/photo-1699520497348-9d6670d177d6?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" />
  </div>
</section>

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Dela+Gothic+One&family=Lato&display=swap");

:root {
  --primary-font: "Bree Serif", serif;
  --primary-color: #333;
  --primary-text-color: #111;
  --secondary-text-color: #fff;
  --primary-padding: 2rem;
  --text-font-size: clamp(1rem, 2.08vw, 1.5rem);
}
body {
  font-family: var(--primary-font);
  margin: 0;
  padding: 0;
  font-size: var(--text-font-size);
}

.grid {
  /** * User input values. */
  --grid-layout-gap: 0em;
  --grid-column-count: 2;
  --grid-item--min-width: 20em;

  /** * Calculated values. */
  --gap-count: calc(var(--grid-column-count) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
  --grid-item--max-width: calc(
    (100% - var(--total-gap-width)) / var(--grid-column-count)
  );
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(max(var(--grid-item--min-width), var(--grid-item--max-width)), 1fr)
  );
  grid-gap: var(--grid-layout-gap);
}

.grid-item {
  text-align: left;
}
.grid-item--text {
  display: flex;
  align-items: center;
  padding: var(--primary-padding);
}
.grid-item--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Once the columns become wrapped keep the content in the right order */
.grid.wrapped .grid-item--text {
  order: 1;
}
.grid.wrapped .grid-item--image {
  order: 2;
}

/**
 * Detect when elements become wrapped
 *
 * @param {NodeList} items - list of elements to check
 * @returns {array} Array of items that were wrapped
 */
const detectWrap = (items) => {
  let wrappedItems = [];
  let prevItem = {};
  let currItem = {};

  for (let i = 0; i < items.length; i++) {
    currItem = items[i].getBoundingClientRect();

    if (prevItem) {
      let prevItemTop = prevItem.top;
      let currItemTop = currItem.top;

      // if current's item top position is different from previous
      // that means that the item is wrapped
      if (prevItemTop < currItemTop) {
        wrappedItems.push(items[i]);
      }
    }

    prevItem = currItem;
  }

  return wrappedItems;
};

const addWrapClasses = (wrapper, cover) => {
  const items = wrapper.querySelectorAll(":scope > *");

  // remove ".wrapped" classes to detect which items was actually wrapped
  cover.classList.remove("wrapped");

  // only after that detect wrap items
  let wrappedItems = detectWrap(items); // get wrapped items

  // if there are any elements that were wrapped - add a special class to menu
  if (wrappedItems.length > 0) {
    cover.classList.add("wrapped");
  }
};

const grids = document.querySelectorAll(".grid");

grids.forEach((grid) => {
  // execute function on page load
  addWrapClasses(grid, grid);

  // execute function on window resize
  window.addEventListener("resize", () => {
    addWrapClasses(grid, grid);
  });
});