My inquiry pertains to a CSS layout. I currently have 3 divs positioned in a horizontal line next to each other, as depicted below...
div1 div2 div3
I am aiming for the divs to reorganize themselves as the screen size decreases. In one scenario, they should display like this. Div2 and 3 side by side with div1 underneath.
div2 div3
div1
If the screen becomes even smaller, they should stack vertically in the following order...
div2
div1
div3
In my efforts to achieve this, I resorted to utilizing display:none and generating duplicate versions of the divs which are toggled based on the screen size. However, I have heard that such methods may not be SEO-friendly, since Google could interpret multiple instances of repeated content within the code. Is there a more efficient technique for accomplishing this task?
Your suggestion about ORDER was quite useful. I'm making progress. What I need now is for the DIV labeled TEXT to be centered beneath the two other divs when the width is at 1200 pixels. Furthermore, everything should align vertically when the width reduces to 800 pixels.
#container {
display: flex;flex-flow: row wrap;justify-content: center;gap:50px 25px;
}
#div1 {width :150px;border:1px solid red;order:1;display:block}
#div2 {width :150px;border:1px solid red;order:2;display:block}
#div3 {width :150px;border:1px solid red;order:3;display:block}
@media (max-width: 1200px) {
#div1 {order:3;}
#div2 {order:1;}
#div3 {order:2;}
}
@media (max-width: 800px) {
#div1 {order:2;}
#div2 {order:1;}
#div3 {order:3;}
}<div id="container">
<div id="div1">
TEXT
</div>
<div id="div2">
Image
</div>
<div id="div3">
VIDEO
</div>
</div>