我需要做的是在桌面上显示一组交错的推荐，然后当屏幕低于 979px 时切换到垂直布局。此人的图像和姓名应作为标题位于顶部，推荐文本应位于正下方。
我已经包含了一个 fiddle here .您可以看到，当视口(viewport)较宽时，布局会交错排列，但当您将其缩小时，布局会切换到更垂直的布局，以显示图像位于左侧的评价。
我需要的是让图片在右边的推荐看起来就像图片在左边的推荐。我能够做到这一点的唯一方法是使用右侧的图像更改推荐的顺序，以便将图像包装器放置在文本包装器上方并将图像包装器 float 到右侧。这样做的问题是它破坏了 inline-block 元素的 vertical-align: middle。
我想知道是否有其他方法可以使用纯 CSS 来实现我的垂直布局目标？我知道我可以使用 Javascript 轻松做到这一点，但如果不需要，我宁愿不使用它。
这是我的代码:
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}
.about-wrapper .spacer {
height: 75px;
}
.about-wrapper h1.customer-testimonial-header {
text-align: center;
font-size: 2rem;
font-weight: 600;
color: white;
}
.about-wrapper .bubble p {
font-size: 0.9rem;
}
.about-wrapper .bubble {
position: relative;
padding: 35px;
background: #FFFFFF;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border: #cecece solid 1px;
}
.about-wrapper .bubble:after {
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
z-index: 1;
top: 50%;
border-color: transparent #FFFFFF;
}
.about-wrapper .bubble:before {
content: '';
position: absolute;
border-style: solid;
border-color: transparent #cecece;
display: block;
width: 0;
z-index: 0;
top: 50%;
}
.about-wrapper .bubble-left:after {
border-width: 15px 20px 15px 0;
left: -19px;
}
.about-wrapper .bubble-left:before {
border-width: 15px 20px 15px 0;
left: -21px;
}
.about-wrapper .bubble-right:after {
border-width: 15px 0px 15px 20px;
right: -19px;
}
.about-wrapper .bubble-right:before {
border-width: 15px 0px 15px 20px;
right: -21px;
}
.about-wrapper .left-one-quarter {
width: 34%;
text-align: center;
}
.about-wrapper .right-three-quarter {
width: 65%;
}
.about-wrapper .right-one-quarter {
width: 34%;
text-align: center;
}
.about-wrapper .left-three-quarter {
width: 65%;
}
.about-wrapper .column {
display: inline-block;
vertical-align: middle;
}
.about-wrapper .testimonial-text:before {
content: ' ';
background: url(/skin/frontend/default/sns_nino/images/icons/quotation-start.png);
height: 16px;
width: 20px;
position: absolute;
left: 10px;
}
.about-wrapper .testimonial-text:after {
content: ' ';
background: url(/skin/frontend/default/sns_nino/images/icons/quotation-end.png);
height: 16px;
width: 20px;
position: absolute;
right: 10px;
}
.about-wrapper .testimonial-name-wrapper {
margin-top: 15px;
}
.about-wrapper .about-banner {
position: relative;
}
.about-wrapper .about-banner .banner-text {
font-size: 2.3rem;
position: absolute;
top: 50%;
}
@media (min-width: 768px) and (max-width: 979px) {
.about-wrapper .left-one-quarter {
border-top: 1px solid;
padding: 20px 0 20px 10px;
border-bottom: 1px solid;
float: left;
width: 100%;
text-align: left;
}
.about-wrapper .right-three-quarter {
width: 100%;
}
.about-wrapper .testimonial-image-wrapper {
width: 20%;
display: inline-block;
}
.about-wrapper .testimonial-name-wrapper {
float: none;
display: inline-block;
margin-top: 15px;
}
.about-wrapper .testimonial-name-wrapper > strong {
margin-left: 20px;
vertical-align: middle;
font-weight: 500;
font-size: 1.5rem;
}
.about-wrapper .testimonial-name-wrapper > span {
display: none;
}
.about-wrapper .bubble-left {
border: none;
}
.about-wrapper .bubble:after,
.about-wrapper .bubble:before {
content: none;
}
.about-wrapper .testimonial-text:before,
.about-wrapper .testimonial-text:after {
content: none;
}
}<div class="about-wrapper">
<div class="testimonial-content">
<div class="left-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
<div class="right-three-quarter column">
<div class="bubble-left bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
</div>
<div class="spacer"> </div>
<div class="testimonial-content">
<div class="left-three-quarter column">
<div class="bubble-right bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
<div class="right-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
</div>
<div class="spacer"> </div>
<div class="testimonial-content">
<div class="left-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
<div class="right-three-quarter column">
<div class="bubble-left bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
</div>
</div>最佳答案
使用 flexbox(在 IE10+ 中有部分支持)你可以使用 order 和 align-self 实现这一点
你只需要处理左边的泡泡，让它变成右边的泡泡。
/*new*/
@media (max-width: 979px) {
.testimonial-content {
display: flex
}
.right-three-quarter {
order: -1
}
.about-wrapper .column {
align-self: center
}
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}
.about-wrapper .spacer {
height: 75px;
}
.about-wrapper h1.customer-testimonial-header {
text-align: center;
font-size: 2rem;
font-weight: 600;
color: white;
}
.about-wrapper .bubble p {
font-size: 0.9rem;
}
.about-wrapper .bubble {
position: relative;
padding: 35px;
background: #FFFFFF;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
border: #cecece solid 1px;
}
.about-wrapper .bubble:after {
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
z-index: 1;
top: 50%;
border-color: transparent #FFFFFF;
}
.about-wrapper .bubble:before {
content: '';
position: absolute;
border-style: solid;
border-color: transparent #cecece;
display: block;
width: 0;
z-index: 0;
top: 50%;
}
.about-wrapper .bubble-left:after {
border-width: 15px 20px 15px 0;
left: -19px;
}
.about-wrapper .bubble-left:before {
border-width: 15px 20px 15px 0;
left: -21px;
}
.about-wrapper .bubble-right:after {
border-width: 15px 0px 15px 20px;
right: -19px;
}
.about-wrapper .bubble-right:before {
border-width: 15px 0px 15px 20px;
right: -21px;
}
.about-wrapper .left-one-quarter {
width: 34%;
text-align: center;
}
.about-wrapper .right-three-quarter {
width: 65%;
}
.about-wrapper .right-one-quarter {
width: 34%;
text-align: center;
}
.about-wrapper .left-three-quarter {
width: 65%;
}
.about-wrapper .column {
display: inline-block;
vertical-align: middle;
}
.about-wrapper .testimonial-text:before {
content: ' ';
background: url(/skin/frontend/default/sns_nino/images/icons/quotation-start.png);
height: 16px;
width: 20px;
position: absolute;
left: 10px;
}
.about-wrapper .testimonial-text:after {
content: ' ';
background: url(/skin/frontend/default/sns_nino/images/icons/quotation-end.png);
height: 16px;
width: 20px;
position: absolute;
right: 10px;
}
.about-wrapper .testimonial-name-wrapper {
margin-top: 15px;
}
.about-wrapper .about-banner {
position: relative;
}
.about-wrapper .about-banner .banner-text {
font-size: 2.3rem;
position: absolute;
top: 50%;
}
@media (min-width: 768px) and (max-width: 979px) {
.about-wrapper .left-one-quarter {
border-top: 1px solid;
padding: 20px 0 20px 10px;
border-bottom: 1px solid;
float: left;
width: 100%;
text-align: left;
}
.about-wrapper .right-three-quarter {
width: 100%;
}
.about-wrapper .testimonial-image-wrapper {
width: 20%;
display: inline-block;
}
.about-wrapper .testimonial-name-wrapper {
float: none;
display: inline-block;
margin-top: 15px;
}
.about-wrapper .testimonial-name-wrapper > strong {
margin-left: 20px;
vertical-align: middle;
font-weight: 500;
font-size: 1.5rem;
}
.about-wrapper .testimonial-name-wrapper > span {
display: none;
}
.about-wrapper .bubble-left {
border: none;
}
.about-wrapper .bubble:after,
.about-wrapper .bubble:before {
content: none;
}
.about-wrapper .testimonial-text:before,
.about-wrapper .testimonial-text:after {
content: none;
}
}<div class="about-wrapper">
<div class="testimonial-content">
<div class="left-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
<div class="right-three-quarter column">
<div class="bubble-left bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
</div>
<div class="spacer"> </div>
<div class="testimonial-content">
<div class="left-three-quarter column">
<div class="bubble-right bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
<div class="right-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
</div>
<div class="spacer"> </div>
<div class="testimonial-content">
<div class="left-one-quarter column">
<div class="testimonial-image-wrapper">
<img src="http://placekitten.com/250/250" alt="">
</div>
<div class="testimonial-name-wrapper"><strong>Example Person</strong>
<br> <span>Nowhere Ville, Alaska</span>
</div>
</div>
<div class="right-three-quarter column">
<div class="bubble-left bubble">
<p class="testimonial-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget nibh nulla. Sed tristique orci a erat semper rhoncus pretium id lacus. Morbi et justo vitae purus vestibulum consequat. Fusce mollis orci ex, eu dictum libero blandit at. Praesent
pretium tortor ipsum, sed tristique justo semper in. Fusce fringilla suscipit tempus. Cras at velit sed neque pellentesque aliquam. Sed iaculis, nisl vitae consequat feugiat, mi nibh tincidunt tortor, nec pretium lorem erat eu elit. Nullam ut
venenatis magna. Morbi tincidunt, leo sed aliquet gravida, nisi lectus consectetur enim, ac convallis purus lacus a mi. Morbi vitae tellus dolor. Aliquam neque augue, ullamcorper at lorem sed, congue dictum orci. Nunc tristique cursus augue.
Nunc rutrum elementum metus, et egestas odio posuere at. Cras vehicula fermentum elit nec pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque ullamcorper accumsan tortor non sollicitudin. Integer ut tortor sit
amet est cursus scelerisque. Etiam porttitor maximus justo, id imperdiet nisi fermentum sit amet. Vestibulum volutpat, ligula laoreet accumsan congue, neque leo gravida ipsum, at fermentum diam elit at nisi. Proin egestas, diam et vestibulum
lobortis, urna orci convallis risus, quis condimentum ex ligula accumsan lacus. Donec lacus libero, sodales eget condimentum eu, porta eu nulla. Ut mollis augue ac mi feugiat, sit amet tincidunt justo feugiat. Donec vel turpis vel nunc faucibus
finibus. In nec metus ullamcorper, eleifend turpis varius, sagittis sapien. Integer vehicula pharetra ornare. Curabitur vitae varius ante, in posuere lorem. Nam vel commodo nisi, ut feugiat urna. Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc iaculis, urna non posuere pharetra, urna libero elementum purus, a molestie neque libero sed quam. Sed vel nunc in augue placerat
vulputate in pharetra ipsum. Morbi cursus massa pellentesque risus molestie, at ultrices leo luctus. Suspendisse ac accumsan nisl. Nulla vulputate ex tortor, non pulvinar ex gravida eu. Nullam sed ipsum eu velit porta euismod et posuere tortor.
Fusce non tempus est, in viverra sem. Integer eget venenatis magna. Curabitur tristique eros ex, at convallis mi semper eu. Sed at nulla nunc. Pellentesque cursus, ante vitae hendrerit elementum, dui dolor lacinia erat, gravida lobortis orci
metus id lectus. Quisque volutpat auctor vulputate. Sed ac nisl sed urna imperdiet egestas at in dui. Donec ut ultricies felis.</p>
</div>
</div>
</div>
</div>关于html - 根据屏幕尺寸 CSS 重新排序 float 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37898712/