I'm learning responsive web-development using media queries and I want to know if it's possible to move an element from one div to another without using a script.
On a desktop display it's arranged like
---------
div1 | | div2
div3 | image | div4
div5 | | div6
---------
which is what I was going for.
and on mobile screens I want
---------
| |
| image |
| |
---------
div1
div2
div3
div4
div5
div6
But I can't seem to move divs past their parent divs.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shuffle</title>
</head>
<body>
<div class="header">
<h1>Shuffle</h1>
</div>
<div id="main">
<div class="leftBox">
<div class="boxItem" id="first">
<p>1</p>
</div>
<div class="boxItem" id="third">
<p>3</p>
</div>
<div class="boxItem" id="fifth">
<p>5</p>
</div>
</div>
<div class="image">
<img src="https://images.unsplash.com/photo-1605842581240-a0e2527d200b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
</div>
<div class="rightBox">
<div class="boxItem" id="second">
<p>2<p>
</div>
<div class="boxItem" id="fourth">
<p>4</p>
</div>
<div class="boxItem" id="sixth">
<p>6</p>
</div>
</div>
</div>
</body>
</html>
CSS
/*
_______________________________________
MOBILE SCREEN
_______________________________________
*/
* {
box-sizing: border-box;
font-family: "Comic Sans MS", Times, serif;
}
#main {
display: -webkit-flex;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
html {
text-align: center;
}
img{
display: inline-block;
max-width: 100%;
height: auto;
}
.image {
display: inline-block;
width: auto;
max-width: 50%;
border: 1px solid gold;
align-self:center;
order: -1;
}
.header {
text-align: center;
}
.boxItem{
border: 1px solid blue;
padding: 2px;
margin: 5px;
}
.leftBox{
display: flex;
flex-direction: column;
width: 50%;
}
.rightBox{
display: flex;
flex-direction: column;
width: 50%;
}
#first{
order: 1;
}
#second{
order: 2;
}
#third{
order: 3;
}
#fourth{
order: 4;
}
#fifth{
order: 5;
}
#sixth{
order: 6;
}
/*
_______________________________________
DESKTOP SCREEN
_______________________________________
*/
#media only screen and (min-width: 768px) {
#first{
order: 1;
}
#second{
order: 2;
}
#third{
order: 3;
}
#fourth{
order: 4;
}
#fifth{
order: 5;
}
#sixth{
order: 6;
}
img{
align-self: center;
}
.image{
align-self: center;
justify-content: center;
align-items: center;
order: 0;
}
#main{
flex-direction: row;
justify-content: space-between;
}
.leftBox{
display:flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
align-self: stretch;
}
.rightBox{
display:flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
align-self: stretch;
}
}
If it's not possible to do this with css as it's written here, then is there another way to achieve this style using one flexbox?
I also have this on codepen https://codepen.io/johntarvis/pen/LYRYVmd?editors=1100 if that helps.
You can do it like this. by using columns property and set it to 2. It's really difficult to achieve your approach without jquery. but in the image part you can set it to absolute and make it center part.
Here's a sample code.
.wrapper {
position: relative;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
}
#main {
position: relative;
}
.column {
-webkit-columns: 2;
columns: 2;
text-align: center;
display: flex;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;
}
.sub_col {
display: block;
width: 34%;
min-height: 100px;
border: 1px solid red;
margin: 0 0 1rem;
position: relative;
z-index: 15;
}
.image {
width: 30%;
margin: 0 auto;
padding: 0;
left: 0;
right: 0;
top: 50%;
position: absolute;
transform: translateY(-50%);
}
.image img {
max-width: 100%;
}
#media only screen and (max-width:768px) {
.column {
-webkit-columns: 1;
columns: 1;
}
.sub_col {
width: 100%;
}
.image {
top: 0;
transform: none;
margin-bottom: 1rem;
position: relative;
width: 100%;
}
}
<div class="wrapper">
<div id="main">
<div class="image">
<img src="https://images.unsplash.com/photo-1605842581240-a0e2527d200b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
</div>
<div class="column">
<div class="sub_col">1</div>
<div class="sub_col">2</div>
<div class="sub_col">3</div>
<div class="sub_col">4</div>
</div>
</div>
</div>
In this way your div elements are still in tact by numbering 1,2,3,4 and so on.
You can use #media queries and flexbox to achieve the desired result:
#main {
display: flex;
width: 100%;
flex-direction: row;
height: 300px;
}
#main > div { width: 33%;}
.leftBox, .rightBox {
height: 100%; text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
img {max-width: 100%; height: auto;}
#media screen and (max-width: 768px) {
#main {
flex-direction: column;
height: auto;
}
#main > div { width: 100%;}
.image {order: -1;}
}
<div class="header">
<h1>Shuffle</h1>
</div>
<div id="main">
<div class="leftBox">
<div class="boxItem" id="first">
<p>1</p>
</div>
<div class="boxItem" id="third">
<p>3</p>
</div>
<div class="boxItem" id="fifth">
<p>5</p>
</div>
</div>
<div class="image">
<img src="https://images.unsplash.com/photo-1605842581240-a0e2527d200b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
</div>
<div class="rightBox">
<div class="boxItem" id="second">
<p>2<p>
</div>
<div class="boxItem" id="fourth">
<p>4</p>
</div>
<div class="boxItem" id="sixth">
<p>6</p>
</div>
</div>
</div>
Read more about ordering elements using flex on MDN
This SO related: how can I reorder HTML using media queries?
CSS Grid might be the way to go.
You can maintain a more logical HTML ordering of 1 - 6 and use CSS to organize the display. This also avoids messing around with absolute positioning. The one downside is if you have a dynamic number of rows and want to span the image across all of them, in which case see this answer: https://stackoverflow.com/a/42240114/4665
You will only need to give minimal styling for mobile then replace the code in your desktop media query with the below. Then tweak the style as needed.
#main {
/*Set Grid*/
display: grid;
/*We want 3 equal columns*/
grid-template-columns: 1fr 1fr 1fr;
/*And 3 equal rows -- Can be omitted*/
grid-template-rows: 1fr 1fr 1fr;
/*With a named area for the picture in the middle cell*/
/*grid-template-areas: ". Pic ." ". Pic ." ". Pic .";*/
}
#main>.image {
/*Place the image in column 2*/
grid-column-start: 2;
/*Place the image in the first row, span 3 rows*/
grid-row: 1 / span 3;
/*If Using named area, assign to the named area*/
/*grid-area: Pic; */
}
/*Just for demo purposes, don't move this into your media query!*/
.image>img {
width: 200px;
}
.boxItem {
text-align: center;
}
<div class="header">
<h1>Shuffle</h1>
</div>
<div id="main">
<div class="image">
<img src="https://images.unsplash.com/photo-1605842581240-a0e2527d200b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
</div>
<div class="boxItem"><p>1</p></div>
<div class="boxItem"><p>2</p></div>
<div class="boxItem"><p>3</p></div>
<div class="boxItem"><p>4</p></div>
<div class="boxItem"><p>5</p></div>
<div class="boxItem"><p>6</p></div>
</div>
Related
This question already has an answer here:
Put one div next to two vertical divs
(1 answer)
Closed 1 year ago.
I am looking for the simplest method, to position three images in the following way using CSS and HTML
Image number 2 and 3 should be of 50% width and height of image number 1.
Thank you in advance
You can use a grid to do so
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
width: 100%;
grid-gap: 4px;
}
img {
max-width: 100%;
}
img:first-child {
max-width: unset;
height: 100%;
width: 100%;
object-fit: cover;
grid-row: span 2;
}
<div class="grid">
<img src="https://images.unsplash.com/photo-1618326985678-88285545a9aa?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMDc5OTgyNA&ixlib=rb-1.2.1&q=85" alt="">
<img src="https://images.unsplash.com/photo-1618326985678-88285545a9aa?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMDc5OTgyNA&ixlib=rb-1.2.1&q=85" alt="">
<img src="https://images.unsplash.com/photo-1618326985678-88285545a9aa?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYyMDc5OTgyNA&ixlib=rb-1.2.1&q=85" alt="">
</div>
.container{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
height: 100px;
width: 100px;
}
#img1{
grid-row: 1/3;
grid-column: 1/2;
border: red solid 1px;
}
#img2{
border: blue solid 1px;
}
#img3{
border: green solid 1px;
}
<div class="container">
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
</div>
I would honestly go with Charles Lavalard's grid solution above, but wanted to show a flex solution that takes in that the images may not fit the designated space.
html, body {
margin: 0px;
}
.container {
display: flex; /* display side by side */
align-items: stretch; /* stretches the .right div */
}
.container img {
object-fit: cover; /* clips image if it's too big */
}
.left, .right {
flex: 1 1 auto; /* fills out the width */
flex-basis: 50%;
}
.right {
display: flex;
flex-direction: column;
}
.small {
flex: 1 1 auto; /* fills out the height */
}
<div class="container">
<img class="left large" src="https://picsum.photos/150/300">
<div class="right">
<img class="small" src="https://picsum.photos/300/100">
<img class="small" src="https://picsum.photos/300/100">
</div>
</div>
There are numerous ways to do this, but i think flex box is the right approach if you want to further align the text inside one of the divs.
A simple method will be to use 3 child divs and wrap it around 2 parent divs and finally 1 grandparent div. Use flex box with direction row on the grandparent div content. Then specify on col2 to be flex-direction column.
.content {
display: flex;
flex-direction: row;
}
.col2 {
display: flex;
flex-direction: column;
}
.first {
background-color: red;
height: 100vh;
width: 50vw;
}
.second {
background-color: green;
height: 50vh;
width: 50vw;
}
.third {
background-color: yellow;
height: 50vh;
width: 50vw;
}
<div class="content">
<div class="col1">
<div class="first">lst</div>
</div>
<div class="col2">
<div class="second">2nd</div>
<div class="third">third</div>
</div>
</div>
img {
height:300px;
width:150px;
border:1px solid white
}
.rows {
display:flex;
flex-direction:column;
}
.container {
display:flex;
flex-direction:row;
}
.rows img{
height:150px;
width: 75px;}
<div class="container">
<img src="https://cdn5.vectorstock.com/i/1000x1000/40/49/cityscape-vertical-3-vector-19094049.jpg">
<div class="rows">
<img src="https://cdn5.vectorstock.com/i/1000x1000/40/49/cityscape-vertical-3-vector-19094049.jpg">
<img src="https://cdn5.vectorstock.com/i/1000x1000/40/49/cityscape-vertical-3-vector-19094049.jpg">
</div>
</div>
I have a layout that is mainly divided into 3 parts and the middle one should take a full height. And it does.
However, I need an additional div which will play a role of the backdrop and here the problem comes. The child doesn't want to take 100% height.
Here .body is a div that is being stretched when there is not enough content and .bg-gray is the one I want to take its parent full height.
Is there a way achieve this without using relative + absolute positioning?
Also, I'm looking for the answer to my question: why is this happening that way.
html, body {
padding: 0;
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
.header {
height: 50px;
background-color: #e6e6e6;
}
.footer {
height: 50px;
background-color: #aaa444;
}
.body {
flex: 1;
}
.bg-gray {
background-color: #eee;
min-height: 100%;
flex: 1;
}
<div class="container">
<div class="header">
</div>
<div class="body">
<div class="bg-gray">
<div>
asdasd
</div>
</div>
</div>
<div class="footer">
</div>
</div>
Apply flexbox to the .body div.
.body {
flex: 1;
display: flex;
flex-direction: column;
}
html,
body {
padding: 0;
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
.header {
height: 50px;
background-color: #e6e6e6;
}
.footer {
height: 50px;
background-color: #aaa444;
}
.body {
flex: 1;
display: flex;
flex-direction: column;
}
.bg-gray {
background-color: darkgrey;
min-height: 100%;
flex: 1;
}
.bg-gray div {
background: lightblue;
}
<div class="container">
<div class="header">
</div>
<div class="body">
<div class="bg-gray">
<div>
asdasd
</div>
</div>
</div>
<div class="footer">
</div>
</div>
I'm currently trying to build a flex layout which should have 3 possible childs:
If the wrapper has just one button, it should have the full width of the wrapper.
If the wrapper has two childs, the last one should have a max width of 75px and the first one must fill the available space.
If the wrapper has at all three childs, the first row should be like at the example before but the last child should be in the next row with 100% width.
I've build this grid layout but I need change it to flex because of the compatibility of some browsers. How can I do this? I've tried a lot but the result is always bad.
.wrapper {
width: 60%;
display: grid;
display: -ms-grid;
grid-template-columns: 1fr 75px;
text-align: center;
position: relative;
margin-bottom: 20px;
}
.wrapper div+div {
margin-left: 6px;
}
.wrapper div {
background-color: yellow;
padding: .6em 1em;
text-align: center;
}
.wrapper div.show.single-button {
grid-column: 1/span 2;
}
.wrapper div.cancel {
grid-column: 1/span 2;
-ms-grid-row: 2;
-ms-grid-column-span: 2;
margin-top: 6px;
margin-left: 0;
}
<div class="wrapper">
<div class="show single-button">Show</div>
</div>
<div class="wrapper">
<div class="show">Show</div>
<div class="invoice">Invoice</div>
</div>
<div class="wrapper">
<div class="show">Show</div>
<div class="invoice">Invoice</div>
<div class="cancel">Cancel</div>
</div>
Judicious use of flex:1 and flex-wrap seems to work.
* {
box-sizing: border-box;
}
.wrapper {
width: 60%;
margin: auto;
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
justify-content: space-between;
border: 1px solid green;
}
.wrapper div {
background-color: lightblue;
padding: .6em 1em;
text-align: center;
margin: 6px;
}
.wrapper div.show {
flex: 1;
}
.wrapper div.invoice {
flex: 1;
max-width: 75px;
}
.wrapper div.cancel {
flex: 1 1 100%;
}
<div class="wrapper">
<div class="show single-button">Show</div>
</div>
<div class="wrapper">
<div class="show">Show</div>
<div class="invoice">Invoice</div>
</div>
<div class="wrapper">
<div class="show">Show</div>
<div class="invoice">Invoice</div>
<div class="cancel">Cancel</div>
</div>
Flexbox offers everything you need for this. No need to hack around by mixing flexbox with box-model or width properties:
.wrapper {
height: 100px;
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
}
.wrapper > div {
flex: 1;
border: 1px dotted #999;
background-color: aliceblue;
}
.wrapper > div:nth-child(2) {
flex-shrink: 0;
flex-grow: 0;
flex-basis: 75px;
-webkit-flex-basis: 75px;
}
.wrapper > div:nth-child(3) {
flex-shrink: 0;
flex-grow: 0;
flex-basis: 100%;
-webkit-flex-basis: 100%;
}
<div class="wrapper">
<div>1</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
</div>
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
You can use flex-basis to tell the initial width of the elements and flex-grow to tell if they should take more space, and flex-wrap so it does not force them to fit in one line, something like:
.wrapper {
display: flex;
flex-wrap: wrap; // make it multiline
margin-bottom: 1rem;
}
.wrapper div {
background: yellow;
margin: .2rem;
padding: .2rem;
text-align: center;
}
.invoice {
flex-basis: 75px; // make it have 75px
flex-grow: 0; // can't grow
flex-shrink: 0; // can't shrink
}
.show {
flex-grow: 1; // no basis width, just grow and take the space left from .invoice
}
.cancel {
flex-basis: 100%; // takes the whole width so it must go on a single row
}
https://codepen.io/anon/pen/KJLqVj
I have made this example:
.example {
max-width: 600px;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row .col {
flex-grow: 1;
flex-basis: 0;
}
.flex-row .content {
flex: 0 0 60%;
padding: 15px;
background: #b7bdbb;
}
.image {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.image img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
<div class="example">
<div class="flex-row">
<div class="col image">
<img src="https://via.placeholder.com/500x265" alt="">
</div>
<div class="col content">
some content
</div>
</div>
</div>
I want my image on the left to be cropped but I want my content to dictate the overal height of the .example element.
Currently the image is dictating the overal height of the entire element. I want to image to be cropped to the size of the content that is in the right column. Is it do-able with my example?
If I understand you correctly you want your right column to set the overall height of #example
.example {
max-width: 600px;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row .col {
flex-grow: 1;
flex-basis: 0;
}
.flex-row .content {
flex: 0 0 60%;
padding: 15px;
background: #b7bdbb;
}
.image {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.image img {
flex-shrink: 0;
min-width: 100%;
max-width: 100%;
position: absolute;
}
<div class="example">
<div class="flex-row">
<div class="col image">
<img src="https://via.placeholder.com/500x265" alt="">
</div>
<div class="col content">
some content
</div>
</div>
</div>
You can use position: relative on parent element and position: absolute on image and set height: 100%
.example {
max-width: 600px;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row .content {
flex: 0 0 60%;
padding: 15px;
background: #b7bdbb;
}
.image {
flex: 1;
position: relative;
}
.image img {
height: 100%;
position: absolute;
vertical-align: top;
}
<div class="example">
<div class="flex-row">
<div class="col image"><img src="https://via.placeholder.com/500x265" alt=""></div>
<div class="col content">some content</div>
</div>
</div>
I want my image on the left to be cropped but I want my content to
dictate the overal height of the .example element.
When using an img, what first comes to mind is object-fit, though since it has not the best browser support, here is one that has, making use of background-image.
Generally, when using background-image, one set the image source in the external CSS, though sometimes one want to set it in the markup, like one does when using an img.
An often overlooked possibility when this is needed, is to simply use the style attribute, which is no more complicated than the src attribute on the img, where one can set the source in markup like this: style="background-image: url(...)"
I also used flex-basis: calc(60% - 30px). This overcome 2 bugs in IE, where one can't use calc in shorthand flex and the border-box issue to have padding inlcuded in the set width.
Stack snippet
.example {
max-width: 600px;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row .image {
flex-grow: 1;
background-position: center;
background-size: cover;
}
.flex-row .content {
flex-basis: calc(60% - 30px);
padding: 15px;
background: #b7bdbb;
}
<div class="example">
<div class="flex-row">
<div class="col image" style="background-image: url(https://via.placeholder.com/500x265)">
</div>
<div class="col content">
some content
</div>
</div>
</div>
If you still need (or have to) use an img, here is one sample that work cross browsers.
Since several browsers, i.a. Safari (appears to be fixed from v. 11 though) and IE, have issues with Flexbox and absolute positioned flex items, I here make use of transform: translate to provide a solution to center the image.
Stack snippet
.example {
max-width: 600px;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row .image {
flex-grow: 1;
position: relative;
overflow: hidden;
}
.flex-row .image img {
position: absolute;
left: 0;
top: 50%;
width: 100%;
transform: translateY(-50%);
}
.flex-row .content {
flex-basis: calc(60% - 30px);
padding: 15px;
background: #b7bdbb;
}
<div class="example">
<div class="flex-row">
<div class="col image">
<img src="https://via.placeholder.com/500x265)" alt="">
</div>
<div class="col content">
some content
</div>
</div>
</div>
You can achieve this using backgound-image property
.example {
max-width: 600px;
}
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row .col {
flex-grow: 1;
flex-basis: 0;
}
.flex-row .content {
flex: 0 0 60%;
padding: 15px;
background: #b7bdbb;
}
.image {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-image:url('https://via.placeholder.com/500x265');
background-size:cover;
background-position:50% 50%;
}
.image img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
<div class="example">
<div class="flex-row">
<div class="col image">
</div>
<div class="col content">
some content
</div>
</div>
</div>
I have looked into Flexbox to achieve a responsive layout like pictured below. Unfortunately I still have not figured out how to achieve a desktop layout like Figure 1 which rearranges itself to Figure 2 on viewports smaller than 414 pixel.
Figure 1 (desktop viewports)
Figure 2 (mobile viewports)
(scaled version)
Click here for image in original size
My code so far :
.flexbox {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0;
flex-direction: row;
}
.content-flexbox.one {
flex-basis: calc(66% - 1rem);
order: 2;
}
.content-flexbox.two {
flex-basis: calc(30% - 1rem);
order: 1;
}
.content-flexbox.three {
order: 3;
}
.content-flexbox.four {
order: 4;
}
.content-flexbox {
margin: 1rem;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
#media only screen and (max-width: 959px) {
.flexbox {
-flex-direction: column;
padding-top: 1rem;
}
.content-flexbox {
margin: 1rem;
flex: 1;
flex-basis: 100%;
}
.content-flexbox.one {
flex-basis: 100%;
order: 1;
}
.content-flexbox.two {
flex-basis: 100%;
order: 2;
}
}
<div class="flexbox">
<div class="content-flexbox one">
<h1 class="posttitle">Lorem ipsum</h1>
<h2 class="subtitle">dolor sit amet</h2>
</div>
<div class="content-flexbox two">
<img src="http://placehold.it/300x300" />
</div>
<div class="content-flexbox three">
<span>Lorem ipsum dolor</span>
</div>
<div id="container-voting" class="content-flexbox four">
<div class="inner-container set">
<span>Lorem ipsum dolor</span>
</div>
<div class="inner-container get">
<span>Lorem ipsum dolor</span>
</div>
</div>
</div>
My question
Is this even possible with flexbox? Is there a better alternative more suited for this layout?
You’re looking for the experimental grid syntax. Flexbox is good for smaller, widget or component layout systems. Grid is for overall page layout, and it’s awesome.
Thing is, grid is only supported in IE, Edge, and the upcoming Safari browsers right now, but Firefox and Chrome support is allegedly just around the corner, and you can start trying it out today by enabling the right developer flag in those browsers.
Here is some sample code, but again, it will only work if your browser supports the new grid syntax.
*{
box-sizing: border-box;
}
.flexbox{
width: 320px;
display: grid;
grid-template-columns: calc(50% - 0.5ch) calc(50% - 0.5ch);
grid-gap: 1ch;
}
.one{
order: 2;
background-color: red;
}
.two{
grid-column: 1 / 3;
order: 1;
background-color: green;
}
.three{
order: 3;
background-color: pink;
}
.four{
display: grid;
grid-column: 1 / 3;
grid-gap: 1ch;
order: 4;
background-color: lavender;
}
.inner-container{
background-color: violet;
}
#media screen and (min-width: 500px){
.flexbox{
width: 500px;
grid-template-columns: calc(33.333% - 0.333ch) calc(33.333% - 0.333ch) calc(33.333% - 0.333ch);
}
.one{
grid-row: 1 / 3;
order: 1;
}
.two{
order: 2;
grid-column: 2 / 4;
}
.three{
order: 3;
}
.four{
grid-column: 3 / 4;
order: 4;
}
}
<div class="flexbox">
<div class="content-flexbox one">
<h1 class="posttitle">Lorem ipsum</h1>
<h2 class="subtitle">dolor sit amet</h2>
</div>
<div class="content-flexbox two">
<img src="http://placehold.it/300x300" />
</div>
<div class="content-flexbox three">
<span>Lorem ipsum dolor</span>
</div>
<div id="container-voting" class="content-flexbox four">
<div class="inner-container set">
<span>Lorem ipsum dolor</span>
</div>
<div class="inner-container get">
<span>Lorem ipsum dolor</span>
</div>
</div>
Although this question explicitly asked for a flexbox approach, there is another way to achive it using simple floats.
A media query allows to rearange the elements in the desired order on viewports less than 414px wide:
.wrap {
background: #d0d0d0;
padding: 1%;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.el {
float: left;
margin: 1%;
}
.el1 {
width: 31.33%;
padding-bottom: 31.33%;
background: #FF7676;
}
.el2 {
float: right;
width: 64.66%;
padding-bottom: 14.66%;
background: #C2FF76;
}
.el3 {
width: 31.33%;
padding-bottom: 14.66%;
background: #FF9BF7;
}
.el4 {
width: 31.33%;
padding-bottom: 6.33%;
background: #9BA4FF;
}
#media (max-width: 414px) {
.el2, .el4 {
width: 98%;
padding-bottom: 31.33%;
}
.el1, .el3 {
width: 48%;
padding-bottom: 48%;
}
}
<div class="wrap">
<div class="el el2"></div>
<div class="el el1"></div>
<div class="el el3"></div>
<div class="el el4"></div>
<div class="el el4"></div>
</div>
Note that I used padding-bottom to keep the aspect ratio of the elements in this example (more info in this answer).
I don't know what content you intend to put in the blocks but you will need to use absolute positionnig for it if you want to stick with the "padding technique". For plain text content, you can check this fiddle.
The problem is that, if you want to be able to rearrange all items, they must be flex items of the same flex container. But Flexbox does not provide any direct way to make an element occupy more than one flex line.
However, you can use multiple containers and display: contents:
The element itself does not generate any boxes, but its children and
pseudo-elements still generate boxes as normal. For the purposes of
box generation and layout, the element must be treated as if it had
been replaced with its children and pseudo-elements in the document
tree.
/* Desktop */
.container {
display: flex;
flex-wrap: wrap;
}
.container > * {
flex-grow: 1;
}
.item {
margin: 2px;
}
.column {
flex-direction: column;
}
.fill {
width: 100%;
}
/* Mobile */
#media (max-width: 414px) {
.container > .container {
display: contents;
}
.i2 {
order: -1;
}
.i4 {
width: 100%;
}
}
/* Pretty */
.i1 { background: #FF7676; }
.i2 { background: #C2FF76; }
.i3 { background: #FF9BF7; }
.i4 { background: #9BA4FF; }
<div class="container">
<div class="item i1">1</div>
<div class="container">
<div class="item i2 fill">2</div>
<div class="item i3">3</div>
<div class="container column">
<div class="item i4">4a</div>
<div class="item i4">4b</div>
</div>
</div>
</div>
The only problem is that display: contents is not widely supported yet, but you can see it working on Firefox.
I don't think this is possible to do with pure css, but you could use some js and change html structure on resize with wrapAll() and unwrap(). You also need to use media queries to change order and some css when window is < 414px.
$(window).on("resize", function() {
var windowW = $(window).width();
if (windowW < 414) {
if ($('.right, right-inner').length) $('.two, .four').unwrap();
if (!$('.top').length) $('.one, .two, .three').wrapAll('<div class="top"></div>');
} else {
if ($('.top').length) $('.one, .two, .three').unwrap();
if (!$('.right, .right-inner').length) {
$('.three, .four').wrapAll('<div class="right-inner"></div>');
$('.two, .right-inner').wrapAll('<div class="right"></div>');
}
}
}).resize();
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.flexbox {
display: flex;
min-height: 100vh;
color: white;
font-size: 50px;
}
.one {
flex: 1;
background: #FF7676;
margin: 10px;
}
.right {
flex: 2;
display: flex;
flex-direction: column;
margin: 10px;
}
.two {
height: 40%;
display: flex;
margin-bottom: 20px;
margin-right: 10px;
}
.two img {
width: 100%;
margin: 0;
}
.right-inner {
display: flex;
flex: 2;
}
.three,
.four {
flex: 1;
}
.three {
background: #FF9BF7;
margin-right: 10px;
}
.four {
display: flex;
flex-direction: column;
}
.set,
.get {
background: #9BA4FF;
flex: 1;
margin: 5px;
}
.set {
margin-top: 0;
}
.get {
margin-bottom: 0;
}
#media(max-width: 414px) {
.flexbox {
flex-direction: column;
}
.flexbox > * {
flex: 1;
margin: 10px;
}
.get,
.set {
margin: 0;
margin-bottom: 10px;
}
.two {
order: -1;
flex: 0 0 100%;
margin-bottom: 0;
}
.two img {
height: 100px;
}
.one,
.three {
width: 50%;
margin: 0;
}
.one {
margin-right: 10px;
}
.top {
display: flex;
flex-wrap: wrap;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="flexbox">
<div class="content-flexbox one">
<span class="posttitle">1</span>
</div>
<div class="right">
<div class="content-flexbox two">
<img src="http://placehold.it/300x300/C2FF76" />
</div>
<div class="right-inner">
<div class="content-flexbox three">
<span>3</span>
</div>
<div id="container-voting" class="content-flexbox four">
<div class="inner-container set">
<span>4a</span>
</div>
<div class="inner-container get">
<span>4b</span>
</div>
</div>
</div>
</div>
</div>
I see that you can make two containers with floats and like mentioned before use liquid style page with width %. If you aproche mobile viewport use media querys to declair breakpoints.