根据屏幕尺寸CSS重新排序浮动元素

时间：2016-06-18 15:38:00

标签： html css css3 responsive-design media-queries

我需要做的是在桌面上显示一组交错的推荐，然后当屏幕低于979px时切换到垂直类型的布局。该人的图像和名称应作为标题位于顶部，并在下方直接显示推荐文本。

我添加了fiddle here。您可以看到，当视口宽时，会出现交错布局，但是当您缩小布局时，布局会切换到更垂直的布局，以显示图像位于左侧的推荐。

我需要的是右侧图像看起来就像左侧图像所示的推荐书。我能够做到这一点的唯一方法是使用右侧的图像更改推荐的顺序，以便将图像包装器放在文本包装器上方并将图像包装器浮动到右侧。这个问题是它打破了vertical-align: middle元素的inline-block。

我想知道使用纯CSS是否有不同的方法来实现我的垂直布局目标？我知道我可以使用Javascript轻松完成它，但如果我不这样做，我宁愿不使用它。

这是我的代码：

＆＃13;
＆＃13; 
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;
  }
}
＆＃13; 
<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">&nbsp;</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">&nbsp;</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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

使用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">&nbsp;</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">&nbsp;</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>

答案 1 :(得分：1)

  

我建议使用Flex框，正如dippas所述。

但是，如果您坚持要以不同的顺序显示 floats ，则需要在HTML DOM中重新排列其外观顺序。

页面上的

浮动按其显示的顺序显示，并符合其他展示位置规则，例如float:left或float:right等。

因此，如果您想重新排序浮动单元，则需要为每个单元提供一个标签（可能是一个id标签），然后为每个单元提供一个CSS媒体查询，以显示/隐藏您想要显示的任何浮动框。屏幕尺寸。

您需要在基于display:none的声明中添加大量display:block / @media来重新排序＆＃34;重新排序＆＃34;您的花车取决于屏幕尺寸。这会导致一些代码重复并增加页面大小......

<强> HTML 

<html>
<body>
<div id='largeScreen'>
    <div class='floater'>top content</div>
    <div class='floater'>middle content</div>
    <div class='floater'>bottom content</div>
</div>
<div id='smallScreen'>
    <div class='floater'>bottom content</div>
    <div class='floater'>top content</div>
    <div class='floater'>middle content</div>
</div>
<body>
</html>

<强> CSS 

.floater {
    float:left;
    width:49%;
}
@media (max-width:600px){
    #largeScreen {
        display:none;
    }
    #smallScreen {
        display:block;
    }
}   
@media (min-width:601px){
    #largeScreen {
        display:block;
    }
    #smallScreen {
        display:none;
    }
}

但我最后说这是一个很大的代码负担和重复页面布局和数据大小，flexbox只会增加可用性。

here is a good guide to starting out with flexbox如果您不习惯它。

相关问题
最新问题