カテゴリー:
CSS
閲覧数:720 配信日:2016-01-12 20:28
<style>
@media screen and (min-width:0px) and ( max-width:543px) { /*画面サイズ0px以上543px以下*/
.flexdiv{
display:flex;
flex-flow: wrap; /*折り返しを許可、「複数行」*/
}
.flexdiv h4 {
order:1;
width:100%;
}
.flexdiv img {
order:2;
}
.flexdiv p {
order:2;
width:70%;
}
}
@media (min-width: 544px) { /*画面サイズ544px以上*/
.card-columns {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.hero__example-link {
margin-top: -1.3rem;
margin-right: -1.3rem;
margin-left: -1.3rem;
text-align: center;
}
}
</style>