<div class="danger">
<h2>
My flex-direction and background color change with the viewport size!
</h2>
<h2>
My flex-direction and background color change with the viewport size!
</h2>
<h2>
My flex-direction and background color change with the viewport size!
</h2>
</div>
/** Styles when > media query */
.danger {
background: orange;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-family: sans-serif;
padding-left: 1em;
}
@media (max-width: 600px) {
/* styles for small viewport */
.danger {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background-color: rgb(102, 51, 153);
}
}
@media (min-width: 600px) and (max-width: 1280px) {
.danger {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
padding: 1rem;
background: teal;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.