<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%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.