Flexbox to change position of elements - html

Question

Is it possible to use flexbox to do something like in this example? Basically Id like to flip elements which are in a column to be in a row when viewed in mobile. How would you do this?
<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

Yes, its possible
Check below example.
I am using CSS media query #media(max-width:768px) to check whether the width of screen is less than 768px(can be any value less than this).
Depending on that, I am setting the direction of flex children to column, so that the children can stack on top of each other.
Along with that, on mobile screen, I am also setting, the display of inner containers(.sec class) to flex,
<div class="sec">
<div class="img">Image</div>
<div class="text">
Text
</div>
</div>
So that, its children will align itself in row.
.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>