Responsive rearrangement of Div layouts
I am working on my own building a website for a local company and I am stuck on how to make my layout / design work quickly. At the moment, my content looks something like this:
However, as the browser screen shrinks, or if the browser is already at a lower resolution, item 3 will slide down both item 1 and item 2 with a width of 100%. Although both paragraphs 1 and 2 would be interrelated with each other. Like that:
At first I had both wrapping divs (1 and 2) set to display: inline-block
. But I couldn't find a single study that said that (after changing the container div in div 2 in the corresponding media query) a child can be inlined with a separate element and another child in the same container won't. I recently started discussing the use of display: table
, display: table-row
and display: table-cell
, to try and organize content in a tabular layout, but I couldn't find a way to assign items 1 and 2 to their own row, except for item 3.
To be honest, it has been a while since I had to mess around with anything HTML / CSS / JavaScript / etc, so I'm a little rusty. I hope to see if someone can point me in the right direction or give me some insight. Thank.
source to share
I used a fluid design with a base div which you can see here https://jsfiddle.net/74x5975j/6/
<div class="group">
<div class="box-1">BOX 1</div>
<div class="box-2">BOX 2</div>
<div class="box-3">BOX 3</div>
</div>
here is the CSS with the media query:
.group {
width: 600px;
height: 300px;
}
.box-1 {
width: 50%;
height: 100%;
float: left;
background-color: gray;
text-align: center;
float: left;
}
.box-2 {
width: 50%;
height: 50%;
float: left;
background-color: blue;
text-align: center;
float: left;
}
.box-3 {
width: 50%;
height: 50%;
float: left;
background-color: red;
text-align: center;
float: left;
}
@media only screen and (max-width: 599px){
.group {
width: 100%;
height: 450px;
}
.box-1 {
height: 66.666%;
}
.box-2 {
height: 66.666%;
}
.box-3 {
width: 100%;
height: 33.333%;
}
}
source to share