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%;
   }

小提琴可以在这里找到，https://jsfiddle.net/yh76h0f9/ 现在我想让这部分响应，但是当我将col设置为display：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; ?option=something会做你想做的事：

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 */
}

（查看“整页”的摘要以便能够调整大小并看到“小屏幕”版本）

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>

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

3 个答案: