jquery - 如何在响应式设计中重新排列 block 元素的顺序？

Question

我有以下 HTML 标记，

<section class="container about-container">
            <div class="about-author col col-2-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nesciunt voluptatum sunt explicabo similique quam tempora fugiat laborum aliquid cupiditate, earum quo, pariatur voluptates delectus corporis quos et vero quia.</p>
            </div>
            <div class="image-author col col-1-3"><img src="http://via.placeholder.com/260x280" alt="sudipto-das"></div>
</section>

并定义了以下样式，

.col {
    display: inline-block;
    vertical-align: top;
   }

.col-2-3 {
    width: 66%;
   }

   .col-1-3 {
    width: 33%;
   }

fiddle 可以在这里找到，https://jsfiddle.net/yh76h0f9/ 现在我想让这个部分响应，但是当我将 col 设置为 display: block 时，图像自然地在文本下方流动。当屏幕尺寸为 570px 及以下时，如何将图像置于文本上方？

Answer 1

我会在这里使用 flexbox； flex-direction:column-reverse 会做你想做的事:

.container {display:flex}

@media screen and (max-width:570px) {
    /* small screens */
    .container {flex-direction: column-reverse}
}

@media screen and (min-width:570px) {
    /* large screens */
    .container {flex-direction: row}
    /* adjust sizes of child elements as needed, with % or flex-grow */
}

<section class="container about-container">
            <div class="about-author col col-2-3">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nesciunt voluptatum sunt explicabo similique quam tempora fugiat laborum aliquid cupiditate, earum quo, pariatur voluptates delectus corporis quos et vero quia.</p>
            </div>
            <div class="image-author col col-1-3"><img src="http://via.placeholder.com/260x280" alt="sudipto-das"></div>
</section>

(在“全页”查看代码片段以调整其大小并查看“小屏幕”版本)