.wrap{display:flex}.one{width:50%;border:0px solid green}.two{width:50%;border:0px solid blue}@media(max-width:767px){.wrap{flex-direction:column-reverse}.one,.two{width:auto}}body{text-align:center}.card{background:#fff;border-radius:2px;display:inline-grid;height:350px;margin:1rem;position:relative;width:300px;padding:15px 25px 15px 25px}.card-1{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all .3s cubic-bezier(.25,.8,.25,1)}.card-1:hover{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}.card-2{box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}.card-3{box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23)}.card-4{box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22)}.card-5{box-shadow:0 19px 38px rgba(0,0,0,0.30),0 15px 12px rgba(0,0,0,0.22)}.frap{display:flex}.three{width:33.33%;border:0px solid green}.four{width:33.33%;border:0px solid blue}.five{width:33.33%;border:0px solid blue}@media(max-width:767px){.frap{flex-direction:column-reverse}.three,.four,.five{width:auto}}.srap{display:flex}.six{width:25%;border:0px solid green}.seven{width:25%;border:0px solid blue}.eight{width:25%;border:0px solid blue}.nine{width:25%;border:0px solid blue}@media(max-width:900px){.srap{flex-direction:column-reverse}.six,.seven,.eight,.nine{width:auto}}