Re-order floated elements based on screen size CSS

What I need to do is display a staggered set of testimonials on desktop and then when the screen is below 979px switch over to a vertical type of layout. The images and name of the person should be on the top as a header and the testimonial text directly below. I have included a fiddle here. You can see that when the viewport is wide there is a staggered layout but when you shrink it the layout switches to a more vertical layout for the testimonials where the image was on the left. What I need is for the testimonials where the image was on the right to look just like the testimonials where the image was on the left. The only way I have been able to do this is to change the order of the testimonials with the image on the right so that the image wrapper is placed above the text wrapper and float the image wrapper to the right. The problem with this is that it breaks the vertical-align: middle of the inline-block elements. I am wondering if there is a different way to accomplish my vertical layout goal using pure CSS? I know I can easily do it with Javascript but would prefer not to use it if I don't have to. Here is my code: 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>