Please help me reverse the elements

There are several items. It is necessary that on the iPad vertical orientation they are located as follows:

00 00 00

, and on the iPad horizontal orientation, they were arranged as follows:

 _00_ 0000

I solved this problem using flex-elements and hidden elements:

jsfiddle

page

But I need a solution that only uses flexbox capabilities (without crutches as hidden elements)

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;} }

    1 answer 1

    Here is such a crutch option)):

     * { box-sizing: border-box; } img { max-width: 100%; width: 100%; height: auto; } .wrap { max-width: 400px; width: 100%; margin: 0 auto; } @media screen and (orientation: portrait) { .icons { display: flex; flex-flow: row wrap; align-items: center; align-content: center; justify-content: center; } .icons_item { width: 50%; } } @media screen and (orientation: landscape) { .icons { display: flex; flex-flow: row wrap; align-items: center; align-content: center; justify-content: center; position: relative; } .icons:before, .icons:after{ content: ''; display: inline-block; width: 25%; order: -1; } .icons_item { width: 25%; } .icons_item:nth-of-type(1), .icons_item:nth-of-type(2) { order:-1; } } 
     <div class="wrap"> <div class="icons"> <div class="icons_item"><a class="icon" href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Enneagram_circle.png"></a></div> <div class="icons_item"><a class="icon" href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Enneagram_circle.png"></a></div> <div class="icons_item"><a class="icon" href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Enneagram_circle.png"></a></div> <div class="icons_item"><a class="icon" href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Enneagram_circle.png"></a></div> <div class="icons_item"><a class="icon" href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Enneagram_circle.png"></a></div> <div class="icons_item"><a class="icon" href=""><img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Enneagram_circle.png"></a></div> </div> </div>

    jsbin by change the width to see the result

    PS: Yes, I understood that without crutches, but ...

    • Why is it a crutch? It is suitable - cyklop77