Flexbox для изменения положения элементов

Question

Можно ли использовать flexbox, чтобы сделать что-то подобное в этом примере? В основном я хотел бы перевернуть элементы, которые находятся в столбце, чтобы быть в строке при просмотре в мобильном телефоне. Как бы вы это сделали?

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

Answer 1

Да, это возможно

Проверьте ниже пример.

Я использую медиазапрос CSS @media(max-width:768px), чтобы проверить, меньше ли ширина экрана, чем 768 пикселей (может быть любое значение меньше этого).

В зависимости от этого я устанавливаю направление гибких дочерних элементов на column, чтобы дочерние элементы могли складываться друг на друга.

Наряду с этим на мобильном экране я также настраиваю отображение внутренних контейнеров (класс .sec) для изгиба,

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

Так что его дети выровняются в ряду.

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

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