<div class=wrapper>
  
  <div class="content red">123</div>
  <div class="content green">123</div>
  <div class="content blue">123</div>
  <div class="content_flex yellow">
    <div class=item>JDGsga asfh afkja gasdf af afaashfh asfkahskjhfak faJDGsga asfh afkja gasdf af afaashfh asfkahskjhfak faJDGsga asfh afkja gasdf af afaashfh asfkahskjhfak faJDGsga asfh afkja gasdf af afaashfh asfkahskjhfak fa</div>
    <div class=item>JDGsga asfh afkja gasdf af afaashfh asfkahskjhfak faJDGsga asfh afkja gasdf af afaashfh asfkahskjhfak faJDGsga asfh afkja gasdf af afaashfh asfkahskjhfak faJDGsga asfh afkja gasdf af afaashfh asfkahskjhfak fa</div>
    <div class=item>JDGsga asfh afkja gasdf af afaashfh asfkahskjhfak faJDGsga asfh afkja gasdf af afaashfh asfkahskjhfak faJDGsga asfh afkja gasdf af afaashfh asfkahskjhfak faJDGsga asfh afkja gasdf af afaashfh asfkahskjhfak fa</div>
  </div>
  <div class="content red">123</div>
  
</div>
.content {
  width: 100%;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}
.content_flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.content_flex .item {
  width: 33%;
  border: 1px red solid;
}

@media (max-width:768px)
{
  .content_flex .item {
  width: 100%;
}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.