Flexbox的布局与柱流体和其他固定宽度

Question

在页我有的文本照片对行的布局。我需要照片有一个固定的宽度和文字有流体宽度。文本必须是垂直居中。我已经使用flexbox来实现这些目标。

正如下面可以看出，在列表项与ID 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（含）480像素，可以包装您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>