Использование @Media для перемещения div ниже родительского div ⇐ Html

[Anonymous]

Я относительно новичок в более сложных CSS, поэтому, пожалуйста, терпите меня. Середина во второй строке. Что -то вроде этого: https://imgur.com/a/mfu4igq> вот мой html: https://jsfiddle.net/ocpw39lj/
И это фактический код:

Код: Выделить всё

Move middle div to bottom in mobile device or when not enough space

#parent {
max-width: 100%;
min-width: 854px;
height: 100px;
display: flex;
background-color: yellow;
}

#divemail {
padding-left: 10px;
padding-right: 10px;
}
#divemail img {
margin-left: auto;
margin-right: auto;
height: 80px;
display: block;
/* Vertically centered */
position: relative;
top: 50%;
transform: translateY(-50%);
}
#divflag {
border: 3px solid blue;
padding-left: 10px;
padding-right: 10px;
}
#divflag img
{
margin: 0 auto;
max-height: 70px;
/* Vertically centered */
position: relative;
top: 50%;
transform: translateY(-50%);
}
#divlogo {
padding-left: 10px;
padding-right: 10px;
}
#divlogo img {
margin: 0 auto;
max-height: 70px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#divmiddle {
flex: 1;
text-align: center;
border: 3px solid green;
}
#divmiddle img
{
max-height: 70px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 480px) {
#parent {
position:fixed;
top:0;
}
}






[img]logo.png[/img]
[img]middle.png[/img]
[img]flag.png[/img]
[img]email.png[/img]





< /code>


#parent {
max-width: 100%;
min-width: 854px;
height: 100px;
display: flex;
background-color: yellow;
}

#divemail {
padding-left: 10px;
padding-right: 10px;
}
#divemail img {
margin-left: auto;
margin-right: auto;
height: 80px;
display: block;
/* Vertically centered */
position: relative;
top: 50%;
transform: translateY(-50%);
}
#divflag {
border: 3px solid blue;
padding-left: 10px;
padding-right: 10px;
}
#divflag img
{
margin: 0 auto;
max-height: 70px;
/* Vertically centered */
position: relative;
top: 50%;
transform: translateY(-50%);
}
#divlogo {
padding-left: 10px;
padding-right: 10px;
}
#divlogo img {
margin: 0 auto;
max-height: 70px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
#divmiddle {
flex: 1;
text-align: center;
border: 3px solid green;
}
#divmiddle img
{
max-height: 70px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
@media (max-width: 480px) {
#parent {
position:fixed;
top:0;
}
}< /code>


[img]https://picsum.photos/200/300[/img]
[img]https://picsum.photos/300/300[/img]
[img]https://picsum.photos/400/300[/img]
[img]https://picsum.photos/150/250[/img]

Подробнее здесь: https://stackoverflow.com/questions/796 ... parent-div