Zigzag Content that floats the image on medium (tablet) viewports and stacks the image on small (mobile) viewports

Zigzag content typically contains two or more sections which each have a block of text and an image. The placement of the text and image alternates for each section:

However on medium sized viewports (small laptops or tablets, etc) the image takes up too much space. I’ve personally found that it looks best to visit our old friend “float”. Don’t be alarmed! It’s okay to use CSS Floats when actually necessary. This is what floats were designed to do:

And then of course on small sized viewports (small tablets, phones, etc) the image becomes too small. So I’ve found that it’s ideal to revert back to flexbox again, like we had in the first place, except with the image and text stacked on top of one another:

CodePen

CSS

// **************************************************
//  Zig-Zag Content
// **************************************************
// zigzag container
.zigzag {
  --block-spacing: clamp(3em, 5vw, 5em);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--block-spacing);
}

// zigzag alternate bg-color on mobile viewports
.zigzag {
  @media (max-width: 640px) {
    padding-inline: 0;

    &.zigzag--vw200-alt-bg-color {
      .zigzag__item {
        padding-inline: 1em;

        &:nth-of-type(odd) {
          background-color: #F5F0E3;
          padding-block: var(--block-spacing);
        }
      }
    }
  }
}

// zigzag item
.zigzag__item {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  gap: 3em;
}

// align vertically
.zigzag__item {
  &.zigzag--align-items-center {
    align-items: center;
  }
}

// zigzag image
.zigzag__image {
  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

// zigzag text
.zigzag__text {
  
}

// zigzag button fix
// probably not needed for most projects:
.zigzag__text {
  .button {
    display: table-cell;
  }
}

// zigzag image and text
.zigzag__image,
.zigzag__text {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 50%;
}

// zigzag alternate
.zigzag {
  .zigzag__item {
    &:nth-of-type(even) {
      flex-direction: row;
    }
  }
}

// use CSS Float instead of CSS Flexbox on medium (tablet) viewports so that the text wraps around the image
// note that when using this your zigzag__image element must come before the 'zigzag__text' element in the DOM
.zigzag__item {
  &.zigzag--vw600-float {
    @media (max-width: 1280px) {
      display: flow-root;

      // float odd .zigzag__item elements to right
      .zigzag__image {
        float: right;
      }

      // float even .zigzag__item elements to left
      &:nth-of-type(even) {
        .zigzag__image {
          float: left;
        }
      }

      // reduce width of image as viewport width decreases
      // add margin to image
      .zigzag__image {
        img {
          width: 50vw;
          margin-bottom: 2vw;
          margin-left: 3vw;
        }
      }

      // add margin to (even) images
      &:nth-of-type(even) {
        .zigzag__image {
          img {
            margin-left: 0;
            margin-right: 3vw;
          }
        }
      }
    }
  }
}

// use CSS Flexbox again on small (mobile) viewports so that the text is stacked above the image
.zigzag__item {
  &.zigzag--vw200-flex {
    @media (max-width: 640px) {
      &:nth-of-type(odd),
      &:nth-of-type(even) {
        display: flex;
        flex-direction: column;

        .zigzag__image {
          float: none;

          img {
            width: 100%;
            margin-bottom: 0;
            margin-left: 0;
            margin-right: 0;
          }
        }
      }
    }
  }
}

HTML

<section class="content width-df | zigzag zigzag--vw200-alt-bg-color">
    <div class="zigzag__item zigzag--align-items-center zigzag--vw600-float zigzag--vw200-flex">
        <div class="zigzag__image">
            <img src="http://via.placeholder.com/683x460" loading="lazy" alt="" width="683" height="460">
        </div>
        <div class="zigzag__text">
            <h2>Heading Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum diam luctus massa convallis, eget porta magna consequat. Pellentesque lacinia risus magna. Nullam eu pretium mi, non varius lacus. Suspendisse porta vitae justo a faucibus. Nam iaculis sit amet dolor placerat sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis pulvinar nisi ut dolor tristique, non posuere arcu pretium. In varius est ac placerat sagittis.<br><br>Aliquam erat volutpat. Aliquam sit amet elit eget libero tristique convallis ut non turpis. Ut hendrerit efficitur pellentesque. Nam eleifend velit lorem, semper eleifend eros porta vel. Duis nulla mi, porttitor ac finibus a, sodales vel tellus. Nullam ornare velit orci, nec faucibus massa molestie sit amet.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium eleifend ligula, et molestie eros fermentum in. Praesent gravida porta lacus, a egestas sem viverra et. Vestibulum ac odio sit amet purus pulvinar iaculis. Ut vitae risus et leo aliquam tristique. Aliquam erat volutpat. Curabitur vitae commodo est, quis pulvinar nisl.</p>
        </div>
    </div>
    <div class="zigzag__item zigzag--align-items-center zigzag--vw600-float zigzag--vw200-flex">
        <div class="zigzag__image">
            <img src="http://via.placeholder.com/683x460" loading="lazy" alt="" width="683" height="460">
        </div>
        <div class="zigzag__text">
            <h2>Heading Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum diam luctus massa convallis, eget porta magna consequat. Pellentesque lacinia risus magna. Nullam eu pretium mi, non varius lacus. Suspendisse porta vitae justo a faucibus. Nam iaculis sit amet dolor placerat sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis pulvinar nisi ut dolor tristique, non posuere arcu pretium. In varius est ac placerat sagittis.<br><br>Aliquam erat volutpat. Aliquam sit amet elit eget libero tristique convallis ut non turpis. Ut hendrerit efficitur pellentesque. Nam eleifend velit lorem, semper eleifend eros porta vel. Duis nulla mi, porttitor ac finibus a, sodales vel tellus. Nullam ornare velit orci, nec faucibus massa molestie sit amet.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium eleifend ligula, et molestie eros fermentum in. Praesent gravida porta lacus, a egestas sem viverra et. Vestibulum ac odio sit amet purus pulvinar iaculis. Ut vitae risus et leo aliquam tristique. Aliquam erat volutpat. Curabitur vitae commodo est, quis pulvinar nisl.</p>
        </div>
    </div>
    <div class="zigzag__item zigzag--align-items-center zigzag--vw600-float zigzag--vw200-flex">
        <div class="zigzag__image">
            <img src="http://via.placeholder.com/683x460" loading="lazy" alt="" width="683" height="460">
        </div>
        <div class="zigzag__text">
            <h2>Heading Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum diam luctus massa convallis, eget porta magna consequat. Pellentesque lacinia risus magna. Nullam eu pretium mi, non varius lacus. Suspendisse porta vitae justo a faucibus. Nam iaculis sit amet dolor placerat sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis pulvinar nisi ut dolor tristique, non posuere arcu pretium. In varius est ac placerat sagittis.<br><br>Aliquam erat volutpat. Aliquam sit amet elit eget libero tristique convallis ut non turpis. Ut hendrerit efficitur pellentesque. Nam eleifend velit lorem, semper eleifend eros porta vel. Duis nulla mi, porttitor ac finibus a, sodales vel tellus. Nullam ornare velit orci, nec faucibus massa molestie sit amet.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium eleifend ligula, et molestie eros fermentum in. Praesent gravida porta lacus, a egestas sem viverra et. Vestibulum ac odio sit amet purus pulvinar iaculis. Ut vitae risus et leo aliquam tristique. Aliquam erat volutpat. Curabitur vitae commodo est, quis pulvinar nisl.</p>
        </div>
    </div>
    <div class="zigzag__item zigzag--align-items-center zigzag--vw600-float zigzag--vw200-flex">
        <div class="zigzag__image">
            <img src="http://via.placeholder.com/683x460" loading="lazy" alt="" width="683" height="460">
        </div>
        <div class="zigzag__text">
            <h2>Heading Lorem Ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam bibendum diam luctus massa convallis, eget porta magna consequat. Pellentesque lacinia risus magna. Nullam eu pretium mi, non varius lacus. Suspendisse porta vitae justo a faucibus. Nam iaculis sit amet dolor placerat sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis pulvinar nisi ut dolor tristique, non posuere arcu pretium. In varius est ac placerat sagittis.<br><br>Aliquam erat volutpat. Aliquam sit amet elit eget libero tristique convallis ut non turpis. Ut hendrerit efficitur pellentesque. Nam eleifend velit lorem, semper eleifend eros porta vel. Duis nulla mi, porttitor ac finibus a, sodales vel tellus. Nullam ornare velit orci, nec faucibus massa molestie sit amet.<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pretium eleifend ligula, et molestie eros fermentum in. Praesent gravida porta lacus, a egestas sem viverra et. Vestibulum ac odio sit amet purus pulvinar iaculis. Ut vitae risus et leo aliquam tristique. Aliquam erat volutpat. Curabitur vitae commodo est, quis pulvinar nisl.</p>
        </div>
    </div>
</section>