JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Portrait View</h3>
<h3>Landscape View</h3>
<article>
  <section>Plan 1</section>
  <section>Plan 2</section>
  <section>Plan 3</section>
  <section>Plan 4</section>
</article>

CSS

article {
  display: flex;
  width: 75%;
  margin: 0 auto;
}
section {
  flex: 1;
}
h3 {
  text-align: center;
}
h3:first-child {
  display: none;
}

@media ( max-width: 600px ) {
  h3:first-child {
    display: block;
  }
  h3:nth-child(2) {
    display: none;
  }
  article {
    flex-wrap: wrap;
  }
  section {
    flex: 1 0 34%
  }
}

/* can ignore styles below; decorative only */
article { padding: 5px; background-color: #f5f5f5; border: 1px solid #ccc; }
section { height: 50px; background-color: lightgreen; border: 1px solid #ccc;
display: flex; justify-content: center; align-items: center; font-size: 1.2em; }