<div class="flex-grid">
  <div class="col">This little piggy went to market.</div>
  <div class="col">This little piggy stayed home.</div>
  <div class="col">This little piggy had roast beef.</div>
</div>

<div class="flex-grid">
  <div class="col">This little piggy went to market.</div>
  <div class="col">This little piggy stayed home.</div>
  <div class="col">This little piggy had roast beef.</div>
  <div class="col">This little piggy had none.</div>
  <div class="col">This little piggy went wee wee wee all the way home.</div>
</div>

<div class="flex-grid-thirds">
  <div class="col">This little piggy went to market.</div>
  <div class="col">This little piggy stayed home.</div>
  <div class="col">This little piggy had roast beef.</div>
</div>
.flex-grid {
  display: flex;
}
.flex-grid .col {
  flex: 1;
}
.flex-grid-thirds {
  display: flex;
  justify-content: space-between;
}
.flex-grid-thirds .col {
  width: 32%;
}

@media (max-width: 400px) {
  .flex-grid,
  .flex-grid-thirds {
    display: block;
    .col {
      width: 100%;
      margin: 0 0 10px 0;
    }
  }
}




* {
  box-sizing: border-box;
}
body {
  padding: 20px;
}
.flex-grid { 
  margin: 0 0 20px 0;
}
.col {
  background: salmon;
  padding: 20px;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

Packages

This Pen doesn't use any packages.