0
233
ViewsHow to complete rwd picture requirements without adding HTML
I have a project whose original screen structure is like the program example I attached!
Now the design draft requires that the original yellow block must appear below the green block on mobile devices, but my original HTML It is already arranged like this. I feel that if it is difficult to implement such a screen on a mobile device, I don't know how to accomplish such a screen change through css without adding HTML?
.demo {
display: flex;
justify-content: space-between;
}
.demo .main {
flex: 2;
background-color: #FBD148;
}
.demo .main .article {
background-color: #49FF00;
height: 200px;
}
.demo .main .reply {
background-color: #3DB2FF;
height: 200px;
}
.demo .about {
flex: 1;
background-color: #FBFF00;
height: 200px;
}<div class="demo">
<div class="main">
<div class="article">article</div>
<div class="reply">reply</div>
</div>
<div class="about">about</div>
</div>
·
Juan Pablo Isaza
1 answers
Answer question0
For solve this, the better way is to use display: grid in demo and main classes. The demo class will have two columns and two rows. In main will has only auto rows. With @media query we are redefine grid colums and rows in the demo and place the yellow element between green and blue.
:root {
--height: 200px;
}
.demo {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: repeat(2, var(--height));
}
.demo .main {
display: grid;
grid-auto-rows: var(--height);
background-color: #fbd148;
}
.demo .main .article {
background-color: #49ff00;
}
.demo .main .reply {
background-color: #3db2ff;
}
.demo .about {
background-color: #fbff00;
}
@media screen and (max-width: 768px) {
.demo {
grid-template-columns: 1fr;
grid-template-rows: repeat(3, var(--height));
}
.about {
grid-column: 1;
grid-row: 2;
}
.reply {
grid-row: 3;
}
}<div class="demo">
<div class="main">
<div class="article">article</div>
<div class="reply">reply</div>
</div>
<div class="about">about</div>
</div>
·
Juan Pablo Isaza
Report
Answer question