【发布时间】：2016-10-17 18:45:06
【问题描述】：
目前正在尝试将 flexbox 集成到我当前的站点布局中。
我有 2 个并排的 flexbox div。左右。
Left 包含文本信息标题。右边包含一张图片。
Codepen 示例：http://codepen.io/Davabo/pen/vKKpWE
我无法弄清楚为什么我的 div 在浏览器调整大小时不换行到下一行。
我希望 div 并排排列，直到视口变得小于 768 像素。然后我希望 div 堆叠，右 div 在左 div 上方。
我尝试了许多不同的 flex-wrap、flex-direction、flex-flow 变体，但我似乎无法让它们换行。
任何帮助都会很棒，谢谢。
* {
margin: 0;
}
.blog {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.left {
flex: 1;
height: auto;
background-color: red;
.entry {
h2, p {
text-align: center;
padding: 20px;
}
}
;
}
.right {
flex: 1;
height: auto;
background-color: green;
}<section class="blog">
<div class="left">
<div class="entry">
<h2>Title</h2>
<p>Date</p>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, dolorem explicabo, odit mollitia nulla voluptatem nihil sapiente? Totam dicta, perspiciatis odit porro iusto reiciendis omnis suscipit minima necessitatibus natus! Dolore quidem distinctio
aperiam praesentium cumque sed vero odit ipsam id neque numquam rem maiores ratione, tenetur aut laboriosam, quae hic ut, deserunt accusantium nemo? Ut explicabo delectus harum natus ad facere officiis tempora ex dolore reprehenderit expedita,
non vitae, laborum rem itaque nulla! Perspiciatis neque rem corrupti maiores dolore? Dicta voluptatum neque quasi, consequuntur. Aliquid voluptas adipisci distinctio suscipit laboriosam eius libero nam numquam. Expedita assumenda labore quae,
mollitia voluptatibus fugit exercitationem quo. Ipsam officia nulla temporibus asperiores velit distinctio, exercitationem quae qui necessitatibus delectus aut magni aliquid repellendus odit mollitia eaque eum. Porro repellendus vero, aut iste
harum, exercitationem fuga debitis culpa. Harum vel tempore unde asperiores nostrum, repellendus eum in architecto non voluptatem assumenda mollitia beatae necessitatibus nisi, laborum distinctio, ullam illo optio amet porro quisquam eius aut
facilis. Fuga minus modi aliquam distinctio dicta fugit sed cum! Iusto necessitatibus odit minima aspernatur possimus vel ullam, ipsam quas. Vitae, aliquam doloremque! Aspernatur ea, error facilis, consectetur nobis libero asperiores porro,
deserunt id aut, blanditiis alias nesciunt inventore perspiciatis consequatur praesentium ipsa dolores rerum est voluptate mollitia provident eius. Tempore quia eaque itaque rerum eum ut minima, magni ab deserunt, molestias distinctio sequi
velit ex. Illum, praesentium alias nemo id quod quam veritatis ratione nisi esse quis laudantium iusto molestias, at. Corrupti nulla deleniti culpa quo voluptatibus quaerat unde delectus voluptatum nisi impedit, inventore dolorum repellat. Quos
inventore, odit consequatur cumque laudantium eius sint suscipit a, ab corrupti aut quo nemo vero. Voluptatum reprehenderit unde cupiditate provident maxime a, sapiente nam, enim, eveniet eaque error autem impedit officiis nisi distinctio voluptate
deserunt, dolorum. Consequatur officia corporis nesciunt incidunt cupiditate, rerum quae nostrum totam, quaerat similique saepe neque alias fugiat in nulla perferendis magni, mollitia voluptas doloremque nam et tempora. Illo in libero dignissimos
voluptatum ut aperiam repellendus nisi distinctio totam incidunt. Perspiciatis animi, quidem rem. Illo praesentium voluptates veniam omnis ducimus magnam facere porro eveniet corporis alias vitae consectetur fugit eligendi, cumque vel impedit
temporibus, enim similique qui aliquid consequatur consequuntur et atque dicta. Ratione, perspiciatis quia voluptatum officiis ab necessitatibus quas eum laudantium in aliquam optio, possimus incidunt dignissimos obcaecati fugit libero et, ex
deserunt molestiae, totam recusandae harum quasi debitis. Nobis libero recusandae expedita, dolorem debitis eligendi? Cumque praesentium quam eum, sunt harum nemo voluptas cum tempora dolorem aspernatur, quis inventore dolor accusantium qui
exercitationem maiores officia totam, repellendus autem. Error laboriosam quibusdam, dolorum quisquam, tempore ipsum a tempora totam nam cumque ad assumenda. Recusandae ratione inventore reprehenderit, necessitatibus illo, culpa vel in omnis
debitis neque doloremque cumque, aperiam id tenetur molestias laboriosam eum dolorum, itaque similique ex deserunt quae mollitia tempore velit earum? Deserunt soluta nulla tempora iure ipsa, maiores harum similique nesciunt eius culpa alias
reiciendis, commodi quisquam aliquam tempore molestias distinctio iusto laboriosam autem consequatur molestiae. Voluptatum consequatur quaerat nulla dolor magni accusantium totam.</p>
</div>
<!-- content div -->
</div>
<!-- entry div -->
</div>
<!-- left div -->
<div class="right"></div>
</section>【问题讨论】：