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

【问题标题】：How to rearrange order of block elements in responsive designs?如何在响应式设计中重新排列块元素的顺序？
【发布时间】：2017-11-02 16:41:21
【问题描述】：

我有以下 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及以下时，如何将图片带到文字上方？

【问题讨论】：

标签： jquery html css responsive-design

【解决方案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>

（在“整页”查看 sn-p 以便能够调整大小并查看“小屏幕”版本）

【讨论】：

嗯，我没有使用flex显示的原因是与旧IE浏览器的兼容性问题，我该如何解决这种情况？
恐怕不容易，除非你想使用像rtl 这样的技巧。就我个人而言，我会利用这个机会来练习“在旧浏览器中优雅地降级”这句话。

【解决方案2】：

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

.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】：

改变section的方向，改变children的顺序：

.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>

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

【讨论】：