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

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可以在这里找到，现在我想让这部分做出响应，但是当我将col值设置为https://jsfiddle.net/yh76h0f9/：block时，图像自然会在文本下方流动。当屏幕尺寸为570px或更低时，如何将图像置于文本之上？

Answer 1

更改section的方向并更改子对象的顺序：

​

.container{
direction: rtl;
}

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

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

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

<section class="container about-container">
<div class="image-author col col-1-3"><img src="http://via.placeholder.com/260x280" alt="sudipto-das"></div>
            <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>            
</section>

​

我为图像的最大宽度添加了一个样式。

Answer 2

我在这里使用了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>

​

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

Answer 3

我在过去所做的克服这个问题的方法是将相同的图像包含两次。在这种情况下，一个上面的文本用于移动设备，一个下面的文本用于桌面。然后使用媒体查询根据您的屏幕大小显示/隐藏任何一个。

​

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

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

.col-1-3 {
	width: 33%;
}
.mobile-image{
	display:none;
 }
@media all and (max-width:570px){
.mobile-image{
	display:block;
} 
.desktop-image{
  display:none;
}
}

<section class="container about-container">
    <div class="image-author mobile-image col col-1-3"><img src="http://via.placeholder.com/260x280" alt="sudipto-das"></div>
    <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 desktop-image col col-1-3"><img src="http://via.placeholder.com/260x280" alt="sudipto-das"></div>
</section>

​