Помогите пожалуйста переверстать элементы
Есть несколько элементов. нужно чтобы на iPad вертикальной ориентации они располагались так:
00
00
00
,а на iPad горизонтальной ориентации, они располагались так:
_00_
0000
Я решил эту задачу, используя flex-элементы и скрытые элементы:
Но мне нужно решение, которой использует только возможности flexbox(без костылей в виде скрытых элементов)
html:
<div class="wrap">
<div class="icons">
<div class="icons_item icons_item_hide"><a class="icon" href=""></a></div>
<div class="icons_item"><a class="icon" href=""><img src="images/circle_border.png"></a></div>
<div class="icons_item"><a class="icon" href=""><img src="images/circle_border.png"></a></div>
<div class="icons_item icons_item_hide"><a class="icon" href=""></a></div>
<div class="icons_item"><a class="icon" href=""><img src="images/circle_border.png"></a></div>
<div class="icons_item"><a class="icon" href=""><img src="images/circle_border.png"></a></div>
<div class="icons_item"><a class="icon" href=""><img src="images/circle_border.png"></a></div>
<div class="icons_item"><a class="icon" href=""><img src="images/circle_border.png"></a></div>
</div>
</div>
css:
body, html{
margin: 0;
padding: 0;
height: 100%;
background: #999;
}
.wrap{
margin: 0 auto;
overflow: hidden;
height: 100%;
}
.icons{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
justify-content: space-around;
height: 100%;
}
.icons_item{
width: 50%;
height: 33%;
display: flex;
}
.icons_item_hide{
display: none;
}
.icon{
width: 100%;
display: block;
}
.icon img{
display: block;
width: 66%;
margin: 0 auto;
}
/* iPad h*/
@media screen and (max-width: 1024px) {
body {background: green;}
.icons_item{
width: 25%;
height: 50%;
}
.icons_item_hide{
display: block;
}
.icon img{
width: 66%;
}
}
/* iPad v*/
@media screen and (max-width: 768px) {
body {background: maroon;}
.icons_item{
width: 50%;
height: 33%;
}
.icons_item_hide{
display: none;
}
.icon img{
width: 66%;
}
}
/* iphone6Plus */
@media screen and (max-width: 414px) {
body {background: orange;}
}
/* iphone6 */
@media screen and (max-width: 375px) {
body {background: lime;}
}
/* iphone5 */
@media screen and (max-width: 320px) {
body {background: red;}
}