Good afternoon! There is such a html construction

<div class="special"> <div class="special__block-left"> <a href="#"><img src="img/left.jpg" alt="left"></a> </div> <div class="special__block-center"> <div class="special__block-center-top"> <h1>Text</h1> <a href="#">Button</a> </div> <div class="special__block-center-bottom"> <h1>Text</h1> <a href="#">Button</a> </div> </div> <div class="special__block-right"> <a href="#"><img src="img/right.jpg" alt="right"></a> </div> </div>

How to use flexbox to position them like in the picture below (I apologize for my Paint skills) on the desktop, tablet and mobile devices? Blocks 1 and 4 are images, 2 and 3 are text with a button, the block is shaded. Dimensions only 1 and 4, as well as blocks 2 and 3 (I apologize again for Paint). Thanks for the help!

Implementation example

  • direction: column; , and then change the order the elements depending on the screen - slippyk
  • @slippyk, in principle, an option, but there will be dregs with hyphens between the columns. - Qwertiy ♦

3 answers 3

Yes you can.

Place in the markup (1 2 (3 4)).

For phone. Everything display: block and it will rise.

For others. Horizontal flexbox.

For the tablet. For container 3 and 4 set the flex: 0 0 100% , for the general container allow the transfer. For themselves 3 and 4 width of 50% in any way.

For the desktop. Reorder items using the order property.

Layout is chosen based on min-width , not to confuse the order of media requests (if they limit the width from one end only, then they extend to a larger size).

     html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .wrapper { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-around; align-items: center; border: 2px solid #000; background-color: #fff; } .block { background-color: #f00; width: 200px; text-align: center; font-size: 35px; font-weight: bold; color: #fff; } .vblock { height: 300px; line-height: 300px; } .hblock { height: 140px; line-height: 140px; } @media screen and (min-width: 674px) { .wrapper { width: 670px; height: 320px; } .block:nth-child(1) { order: 0; } .block:nth-child(2) { order: 3; } .block:nth-child(3) { order: 1; } .block:nth-child(4) { order: 2; } } @media screen and (min-width: 225px) and (max-width: 673px) { .wrapper { width: 500px; height: 480px; } .block:nth-child(1) { order: 0; } .block:nth-child(2) { order: 2; } .block:nth-child(3) { order: 1; } .block:nth-child(4) { order: 4; } } @media screen and (max-width: 224px) { .wrapper { width: 220px; height: 960px; } .block:nth-child(1) { order: 0; } .block:nth-child(2) { order: 1; } .block:nth-child(3) { order: 2; } .block:nth-child(4) { order: 3; } } 
     <div class="wrapper"> <div class="block vblock">1</div> <div class="block vblock">2</div> <div class="block hblock">3</div> <div class="block hblock">4</div> </div>

    fiddle

       * { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; } .container__inner { display: flex; flex-flow: row wrap; } .block { padding: 20px; border: 1px solid; text-align: center; } .block--1, .block--2 { min-width: 200px; } .block--3, .block--4 { flex-basis: 100%; } /* tablet */ @media (max-width: 1024px) { .container { flex-flow: row wrap; } .block--1 { order: 0; flex-basis: 50%; } .block--2 { order: 1; flex-basis: 50%; } .container__inner { order: 2; flex-grow: 1; } .block--3, .block--4 { flex-grow: 1; } } /* mobile */ @media (max-width: 560px) { .block--1, .block--2, .block--3, .block--4 { flex-basis: 100%; } .container__inner { flex-flow: row wrap; } } 
       <div class="container"> <div class="block block--1">1</div> <div class="container__inner"> <div class="block block--3">3</div> <div class="block block--4">4</div> </div> <div class="block block--2">2</div> </div>