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

Question

图1是桌面模式;下面有两个图像和文字，总共三个div。

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

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

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

Answer 1

你可以通过使用CSS @media查询和flex order来实现这一点：

JSFiddle - DEMO

<强> 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允许您change the order of elements而不更改HTML标记。所以：

• 订购桌面元素
• 然后使用媒体查询和弹性显示来更改顺序

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

点击＆＃34;整页＆＃34;按钮查看桌面版。