Check out the wireframe below to see how our page currently appears in landscape mode, along with the items it contains:
Below is the corresponding code for the landscape wireframe:
<div class="wrapper">
<div class="column">
<div id="1" class="one"></div>
<div id="2" class="two"></div>
</div>
<div id="3" class="three"></div>
<div id="4" class="four"></div>
</div>
.wrapper {
display: flex;
flex-direction: row;
}
.column {
display: flex;
flex-direction: column;
}
I attempted to rearrange the items, but encountered challenges when transitioning to portrait layout due to the constrains of the column class containing one and two.
I am seeking a way to reorganize these divs into a new layout for portrait mode (and potentially landscape mode) without creating duplicates. Is there a method using flexbox to transform the landscape layout into the portrait wireframe? Alternatively, can the code from the landscape layout be adapted to accommodate both wireframes?