Flexbox макет с помощью колоночной жидкости, а другая фиксированной шириной

Question

На страницы У меня есть макет с рядами текстом фото пара. Мне нужна фотография с фиксированной шириной, а текст - с шириной жидкости. Текст должен быть с вертикальным расположением. Я использовал flexbox для достижения этих целей.

Как можно увидеть ниже, в пункте списка с идентификатором Box2, чтобы поместить фотографию слева, я должен был вставить его перед тем текстовый блок в DOM.

Проблема: на небольших, мобильных разрешениях, когда дисплей переходит к блоку вместо гибких, фотографий первого и второго ряд являются одна за другой, когда вместо этого, должна быть блоком текст между ними.

Как это исправить?

h3 { 
 
    max-width: 1000px; 
 
    margin: 0 auto; 
 
    padding: 65px 0; 
 
    font-size: 36px; 
 
    line-height: 1.2; 
 
    font-weight: 300; 
 
    font-family: "Open Sans", sans-serif; 
 
} 
 
ul.boxes { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
ul.boxes li { 
 
    color: #3e3e3e; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
} 
 
ul.boxes #box1 { 
 
    background: #dcdcdc; 
 
} 
 
ul.boxes #box3 { 
 
    background: #6b6b6b; 
 
    color: #fff; 
 
} 
 
ul.boxes li .photo { 
 
    width: 402px; 
 
    max-width: 100%; 
 
} 
 
ul.boxes li .content { 
 
    padding: 0 65px; 
 
    width: 100%; 
 
} 
 
ul.boxes li h4 { 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size: 16px; 
 
    margin-top: 0; 
 
    text-transform: uppercase; 
 
} 
 
ul.boxes li .content ul { 
 
    padding: 0; 
 
} 
 
ul.boxes li .content ul li { 
 
    padding-left: 20px; 
 
    background: transparent url('img/redbullet.png') no-repeat 5px 8px; 
 
} 
 
@media screen and (max-width: 480px) { 
 
    ul.boxes, 
 
    ul.boxes li { 
 
    display: block; 
 
    margin-bottom: 10px; 
 
    } 
 
}

<h3 class="text-center thin">Obiectivul nostru este să fim în fiecare zi mai buni, iar munca noastră se bazează pe 3 piloni principali: 
 
\t Calitate, Creativitate, Rezultate.</h3> 
 
<ul class="boxes"> 
 
    <li id="box1"> 
 
    <div class="content"> 
 
     <h4>Lorem ipsum dolor</h4> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, reiciendis molestias inventore blanditiis ratione amet, dolore id doloribus minus iure esse, accusantium qui ex, nesciunt? Officiis, animi saepe libero quae!</p> 
 
    </div> 
 
    <div class="photo flex-left"> 
 
     <div class="photo flex-right"> 
 
     <img src="http://placehold.it/402x335"> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li id="box2"> 
 
    <div class="photo flex-right"> 
 
     <img src="http://placehold.it/402x335"> 
 
    </div> 
 
    <div class="content"> 
 
     <h4>Lorem ipsum dolor</h4> 
 
     Descoperim continuu soluții noi pentru a ne îndeplini sarcinile și pentru a trece peste provocările zilnice, ca să fim în fiecare zi mai buni. 
 
    </div> 
 
    </li> 
 
    <li id="box3"> 
 
    <div class="content"> 
 
     <h4>Lorem ipsum dolor</h4> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, reiciendis molestias inventore blanditiis ratione amet, dolore id doloribus minus iure esse, accusantium qui ex, nesciunt? Officiis, animi saepe libero quae!</p> 
 
    </div> 
 
    <div class="photo flex-left"> 
 
     <div class="photo flex-right"> 
 
     <img src="http://placehold.it/402x335"> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 1

Вместо display: block ниже (и в том числе) 480px, вы можете обернуть ваши flexbox и установить порядок для гибких детей, как это:

ul.boxes, 
    ul.boxes li { 
    flex-wrap: wrap; 
    margin-bottom: 10px; 
    } 
    ul.boxes li .photo { 
    order: 2; 
    } 
    ul.boxes li .content { 
    order: 1; 
    } 

Я думаю, теперь вы можете перейти отсюда - см. демонстрационную версию ниже:

h3 { 
 
    max-width: 1000px; 
 
    margin: 0 auto; 
 
    padding: 65px 0; 
 
    font-size: 36px; 
 
    line-height: 1.2; 
 
    font-weight: 300; 
 
    font-family: "Open Sans", sans-serif; 
 
} 
 
ul.boxes { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
ul.boxes li { 
 
    color: #3e3e3e; 
 
    display: flex; 
 
    flex-direction: row; 
 
    align-items: center; 
 
} 
 
ul.boxes #box1 { 
 
    background: #dcdcdc; 
 
} 
 
ul.boxes #box3 { 
 
    background: #6b6b6b; 
 
    color: #fff; 
 
} 
 
ul.boxes li .photo { 
 
    width: 402px; 
 
    max-width: 100%; 
 
} 
 
ul.boxes li .content { 
 
    padding: 0 65px; 
 
    width: 100%; 
 
} 
 
ul.boxes li h4 { 
 
    font-family: 'Oswald', sans-serif; 
 
    font-size: 16px; 
 
    margin-top: 0; 
 
    text-transform: uppercase; 
 
} 
 
ul.boxes li .content ul { 
 
    padding: 0; 
 
} 
 
ul.boxes li .content ul li { 
 
    padding-left: 20px; 
 
    background: transparent url('img/redbullet.png') no-repeat 5px 8px; 
 
} 
 
@media screen and (max-width: 480px) { 
 
    ul.boxes, 
 
    ul.boxes li { 
 
    flex-wrap: wrap; 
 
    margin-bottom: 10px; 
 
    } 
 
    ul.boxes li .photo { 
 
    order: 2; 
 
    } 
 
    ul.boxes li .content { 
 
    order: 1; 
 
    } 
 
}

<h3 class="text-center thin">Obiectivul nostru este să fim în fiecare zi mai buni, iar munca noastră se bazează pe 3 piloni principali: 
 
\t Calitate, Creativitate, Rezultate.</h3> 
 
<ul class="boxes"> 
 
    <li id="box1"> 
 
    <div class="content"> 
 
     <h4>Lorem ipsum dolor</h4> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, reiciendis molestias inventore blanditiis ratione amet, dolore id doloribus minus iure esse, accusantium qui ex, nesciunt? Officiis, animi saepe libero quae!</p> 
 
    </div> 
 
    <div class="photo flex-left"> 
 
     <div class="photo flex-right"> 
 
     <img src="http://placehold.it/402x335"> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li id="box2"> 
 
    <div class="photo flex-right"> 
 
     <img src="http://placehold.it/402x335"> 
 
    </div> 
 
    <div class="content"> 
 
     <h4>Lorem ipsum dolor</h4> 
 
     Descoperim continuu soluții noi pentru a ne îndeplini sarcinile și pentru a trece peste provocările zilnice, ca să fim în fiecare zi mai buni. 
 
    </div> 
 
    </li> 
 
    <li id="box3"> 
 
    <div class="content"> 
 
     <h4>Lorem ipsum dolor</h4> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, reiciendis molestias inventore blanditiis ratione amet, dolore id doloribus minus iure esse, accusantium qui ex, nesciunt? Officiis, animi saepe libero quae!</p> 
 
    </div> 
 
    <div class="photo flex-left"> 
 
     <div class="photo flex-right"> 
 
     <img src="http://placehold.it/402x335"> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</ul>