在响应模式下使用CSS更改订单元素

Question

图1是桌面模式；以下两张图片和文字，总计三个div。

图2是我希望它在手机等移动浏览器中显示的方式。

关于如何实现这一目标的任何想法？

我愿意接受任何建议。想法是使文本显示在图像上方，以最好地说明两个图像的描述。不能将文本放在桌面版本的顶部。

Answer 1

您可以使用CSS @media查询和弹性顺序来实现此目的，如下所示：

JSFiddle- 演示

HTML：

<div class="div-1">
    <div class="div div-2">image 1</div>
    <div class="div div-3">image 2</div>
    <div class="text">my text</div>
</div>

CSS：

.div-1 {
    width: 100%;
    text-align: center;
}
.div {
    display: inline-block;
    width: 300px;
    height: 200px;
    background: #EEE;
    margin: 10px;
}
@media (max-width: 660px) {
    .div-1 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .div-2 {
        order: 2;
    }
    .div-3 {
        order: 3;
    }
    .text {
        width: 100%;
        order: 1;
    }
}

Answer 2

CSS Flexbox 允许您在不更改 HTML 标记的情况下更改元素的顺序。所以：

• 为桌面订购元素
• 然后使用媒体查询和flex display来改变顺序

/* DESKTOP CSS */

#image1,
#image2 {
  display: inline-block;
  width: 5em;
  height: 5em;
  background-color: #CCC;
}

/* MOBILE CSS */

@media only screen and (max-width: 700px) {
  #wrapper {
    display: flex;
    flex-direction: column;
  }
  #caption {
    order: 1;
  }
  #image1 {
    display: block;
    order: 2;
  }
  #image2 {
    display: block;
    order: 3;
  }
}

<div id="wrapper">
  <div id="image1">Image 1</div>
  <div id="image2">Image 2</div>
  <div id="caption">Caption</div>
</div>

单击“整页”按钮查看桌面版本。