Flexbox可以更改元素的位置

Question

是否可以使用flexbox执行此示例中的操作？基本上我喜欢在移动中查看时将列中的元素翻转成一行。你会怎么做？

＆＃13;

＆＃13;

<p> Desktop:</p>
<table style="height: 52px;" width="331">
<tbody>
<tr>
<td style="width: 103.533px;">image-icon1</td>
<td style="width: 103.533px;">image-icon2</td>
<td style="width: 103.533px;">image-icon3</td>
</tr>
<tr>
<td style="width: 103.533px;">Text1</td>
<td style="width: 103.533px;">Text2</td>
<td style="width: 103.533px;">Text3</td>
</tr>
</tbody>
</table>
<p> Mobile:</p>
<table style="height: 71px;" width="189">
<tbody>
<tr>
<td style="width: 87.1px;">image-icon1</td>
<td style="width: 87.1px;">Text1</td>
</tr>
<tr>
<td style="width: 87.1px;">image-icon2</td>
<td style="width: 87.1px;">Text2</td>
</tr>
<tr>
<td style="width: 87.1px;">image-icon3</td>
<td style="width: 87.1px;">Text3</td>
</tr>
</tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

是的，可能的

检查以下示例。

我正在使用CSS媒体查询@media(max-width:768px)来检查屏幕宽度是否小于768px（可以是小于此值的任何值）。

根据这一点，我将弹性儿童的方向设置为column，以便儿童可以叠加在一起。

除此之外，在移动设备屏幕上，我还设置了内部容器（.sec类）的展示，以便展示，

<div class="sec">
    <div class="img">Image</div>
    <div class="text">
      Text
    </div>
  </div>

这样，它的孩子就会排成一排。

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-direction: row;/* default value*/
}
.text,.img{
  padding:10px;
}
.sec {
  flex: 1;
  background-color: wheat;
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

@media(max-width:768px) { /* can be anything less than this*/
  .container {
    flex-direction: column;
  }
  .sec {
    display: flex;
    flex-direction: row;/* default value*/
  }
 
  
}

＆＃13;

<div class="container">
  <div class="sec">
    <div class="img">Image</div>
    <div class="text">
      Text
    </div>
  </div>
  <div class="sec">
    <div class="img">Image</div>
    <div class="text">
      Text
    </div>
  </div> <div class="sec">
    <div class="img">Image</div>
    <div class="text">
      Text
    </div>
  </div> <div class="sec">
    <div class="img">Image</div>
    <div class="text">
      Text
    </div>
  </div> <div class="sec">
    <div class="img">Image</div>
    <div class="text">
      Text
    </div>
  </div> <div class="sec">
    <div class="img">Image</div>
    <div class="text">
      Text
    </div>
  </div> <div class="sec">
    <div class="img">Image</div>
    <div class="text">
      Text
    </div>
  </div>


</div>

＆＃13;

＆＃13;

＆＃13;