<div class="container">
  <div class="one">1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi temporibus quos, quo labore animi earum repellendus cupiditate iusto placeat doloribus modi dicta culpa est? Ipsa laborum nam voluptate. Hic, blanditiis?</div>
  <div class="two">2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, laboriosam similique minus tempora, facilis consectetur veniam incidunt asperiores dicta adipisci quo dolorum magni cumque pariatur voluptates debitis eveniet deserunt vitae.</div>
  <div class="three">3. adipisicing elit. Omnis incidunt, magni ratione neque, asperiores quod possimus molestias reprehenderit excepturi veniam ea eos est dolor qui quibusdam, adipisci voluptate vero esse?</div>
  <div class="four">4. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum praesentium tempore, accusantium suscipit consectetur hic iure libero voluptatibus reiciendis error excepturi earum sunt? Dolores laborum voluptate recusandae beatae unde facere.</div>
</div>

.container {
  max-width: 1020px;
  margin: 4rem auto;
  display: flex;
  border: 1px solid red;
  align-items: center;
}

.container div {
  padding: 1rem;
  border-radius: 4px;
  margin: .5rem;
}

.one {
  height: 300px;
  background: rgba(purple, .2);
  order: 4;
}

.two {
  height: 200px;
  background: rgba(black, .2);
  order: 0;
}

.three {
  height: 260px;
  background: rgba(blue, .2);
  order: 2;
}

.four {
  height: 200px;
  background: rgba(orange, .2);
  order: 1;
}