<p>
  Try to change window width. All the layout changes are in:
</p>

<pre>
<code>
@media (min-width: 640px) {
  :root {
    --layout-gap: 1em;
    --layout-column-width: 50%;  
  }  
}
@media (min-width: 768px) {
  :root {
    --layout-column-width: 25%;  
  }  
}
</code>
</pre>

<div class="container">

  <p class="column">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni expedita molestiae earum autem ex, aliquid, explicabo veniam nulla voluptas placeat perferendis numquam hic. Tempora, dolor aliquam quas magnam architecto aspernatur.
  </p>
  
  <p class="column">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni expedita molestiae earum autem ex, aliquid, explicabo veniam nulla voluptas placeat perferendis numquam hic. Tempora, dolor aliquam quas magnam architecto aspernatur.
  </p>
  
  <p class="column">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni expedita molestiae earum autem ex, aliquid, explicabo veniam nulla voluptas placeat perferendis numquam hic. Tempora, dolor aliquam quas magnam architecto aspernatur.
  </p>
  
  <p class="column">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni expedita molestiae earum autem ex, aliquid, explicabo veniam nulla voluptas placeat perferendis numquam hic. Tempora, dolor aliquam quas magnam architecto aspernatur.
  </p>  

</div>
/* layout container: */
.container {
  display: flex;
  flex-wrap: wrap;
  background: lightgrey;  
  justify-content: space-between;
}

/* layout column: */
.column {
  box-sizing: border-box;
  border: 1px solid black; 
  padding: 1em;
  margin: 0 0 1em 0;
  width: calc(    
    var(--layout-column-width) 
    - var(--layout-gap)/2 
  );
}

/* Breakpoints */

:root {
  --layout-gap: 0;
  --layout-column-width: 100%;  
}

@media (min-width: 480px) and (max-width: 767px) {
  :root {
    --layout-gap: 1em;
    --layout-column-width: 50%;  
  }  
}

@media (min-width: 768px) {
  :root {
    --layout-gap: 1em;    
    --layout-column-width: 25%;  
  }  
}

/* etc. */

body {  
  font-family: Georgia, serif;
}

* {
  transition: .2s all;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.