Flexbox CSS Arrangment of Divs

up vote
2
down vote

favorite

Trying to arrange divs using Flexbox and not sure what I want to do is even possible.

Desired look at 769 pixels is to have column F expand down the entire height of the container on the left, and G and H stack on top of each other to the right (run the code snippet to see).

Once the screen resolution gets below 768 the look I have currently is the desired result for that view (F and G on the same row and H below spanning the width of both).

body 
 background: #f5f5f5;

.wrap 
 max-width: 1100px;
 margin: 0 auto;
 padding: 40px;

.title 
 font-family: 'Montserrat';
 font-size: 24px;
 line-height: 30px;
 display: inline-block;
 vertical-align: middle;

.card 
 margin: 20px 0;
 box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
 background-color: #fff;

.container.show-border, .element.show-border 
 border: 1px red solid;
 padding: 9px;

.content 
 color: #fff;
 background-color: #cccccc;
 padding: 20px;
 font-family: 'Montserrat';
 font-size: calc(1vw + 1em);


@media (max-width: 375px) 
.content 
 padding: 5px;
 font-size: 0;
 text-indent: -9999999em;


.container, .element 
 padding: 10px;

.flex 
 display: flex;
 box-sizing: border-box;

.row 
 flex-flow: row wrap;

.col 
 flex-flow: column wrap;

.element 
 min-width: 100px;

.content 
 flex: 1 100%;

.structure 
 min-height: 480px;

.structure-2 
 flex: 1 44.4444444444%;

.f 
 flex: 1 25%;
 min-height: 480px;

.g 
 flex: 1 75%;

.h 
 flex: 1 75%;


@media (max-width : 768px )
.structure-2, .f, .g 
 flex: 1 50%;
 min-height: 480px;

.h 
 flex: 1 100%;
 min-height: 480px;

		<p>This table is a visual representation of what I am trying to accomplish at 769 px or higher. The view at 768 pixels or lower is as I want.</p>
		<table width="200" border="1">
 <tbody>
 <tr>
 <td rowspan="2">F</td>
 <td>G</td>
 </tr>
 <tr>
 <td>H</td>
 </tr>
 </tbody>
 </table>
 <div class="wrap">
 <div class="container card">
 <div class="flex row structure">
 <div class="flex row structure-2">
 <div class="flex element f">
 <div class="content"> F </div>
 </div>
 <div class="flex element g">
 <div class="content"> G </div>
 </div>
 <div class="flex element h">
 <div class="content"> H </div>
 </div>
 </div>
 </div>
 </div>
 </div>

edited Nov 9 at 18:51

asked Nov 9 at 17:12

echristo66

10910

I think for the first one, you would need to flex direction column with column wrap, then use the media query to change to rows for the second one
– Pete
Nov 9 at 17:27

This seems the perfect scenario for grid layout, do you need to use flexboxes?
– Becks
Nov 9 at 18:15

Updated the media query to 768px, sorry that was an odd typo on my part. I will look at grid layout too. thanks!
– echristo66
Nov 9 at 18:53

add a comment |

up vote
2
down vote

favorite

Trying to arrange divs using Flexbox and not sure what I want to do is even possible.

Desired look at 769 pixels is to have column F expand down the entire height of the container on the left, and G and H stack on top of each other to the right (run the code snippet to see).

Once the screen resolution gets below 768 the look I have currently is the desired result for that view (F and G on the same row and H below spanning the width of both).

body 
 background: #f5f5f5;

.wrap 
 max-width: 1100px;
 margin: 0 auto;
 padding: 40px;

.title 
 font-family: 'Montserrat';
 font-size: 24px;
 line-height: 30px;
 display: inline-block;
 vertical-align: middle;

.card 
 margin: 20px 0;
 box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
 background-color: #fff;

.container.show-border, .element.show-border 
 border: 1px red solid;
 padding: 9px;

.content 
 color: #fff;
 background-color: #cccccc;
 padding: 20px;
 font-family: 'Montserrat';
 font-size: calc(1vw + 1em);


@media (max-width: 375px) 
.content 
 padding: 5px;
 font-size: 0;
 text-indent: -9999999em;


.container, .element 
 padding: 10px;

.flex 
 display: flex;
 box-sizing: border-box;

.row 
 flex-flow: row wrap;

.col 
 flex-flow: column wrap;

.element 
 min-width: 100px;

.content 
 flex: 1 100%;

.structure 
 min-height: 480px;

.structure-2 
 flex: 1 44.4444444444%;

.f 
 flex: 1 25%;
 min-height: 480px;

.g 
 flex: 1 75%;

.h 
 flex: 1 75%;


@media (max-width : 768px )
.structure-2, .f, .g 
 flex: 1 50%;
 min-height: 480px;

.h 
 flex: 1 100%;
 min-height: 480px;

		<p>This table is a visual representation of what I am trying to accomplish at 769 px or higher. The view at 768 pixels or lower is as I want.</p>
		<table width="200" border="1">
 <tbody>
 <tr>
 <td rowspan="2">F</td>
 <td>G</td>
 </tr>
 <tr>
 <td>H</td>
 </tr>
 </tbody>
 </table>
 <div class="wrap">
 <div class="container card">
 <div class="flex row structure">
 <div class="flex row structure-2">
 <div class="flex element f">
 <div class="content"> F </div>
 </div>
 <div class="flex element g">
 <div class="content"> G </div>
 </div>
 <div class="flex element h">
 <div class="content"> H </div>
 </div>
 </div>
 </div>
 </div>
 </div>

edited Nov 9 at 18:51

asked Nov 9 at 17:12

echristo66

10910

I think for the first one, you would need to flex direction column with column wrap, then use the media query to change to rows for the second one
– Pete
Nov 9 at 17:27

This seems the perfect scenario for grid layout, do you need to use flexboxes?
– Becks
Nov 9 at 18:15

Updated the media query to 768px, sorry that was an odd typo on my part. I will look at grid layout too. thanks!
– echristo66
Nov 9 at 18:53

add a comment |

up vote
2
down vote

favorite

Trying to arrange divs using Flexbox and not sure what I want to do is even possible.

Desired look at 769 pixels is to have column F expand down the entire height of the container on the left, and G and H stack on top of each other to the right (run the code snippet to see).

Once the screen resolution gets below 768 the look I have currently is the desired result for that view (F and G on the same row and H below spanning the width of both).

body 
 background: #f5f5f5;

.wrap 
 max-width: 1100px;
 margin: 0 auto;
 padding: 40px;

.title 
 font-family: 'Montserrat';
 font-size: 24px;
 line-height: 30px;
 display: inline-block;
 vertical-align: middle;

.card 
 margin: 20px 0;
 box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
 background-color: #fff;

.container.show-border, .element.show-border 
 border: 1px red solid;
 padding: 9px;

.content 
 color: #fff;
 background-color: #cccccc;
 padding: 20px;
 font-family: 'Montserrat';
 font-size: calc(1vw + 1em);


@media (max-width: 375px) 
.content 
 padding: 5px;
 font-size: 0;
 text-indent: -9999999em;


.container, .element 
 padding: 10px;

.flex 
 display: flex;
 box-sizing: border-box;

.row 
 flex-flow: row wrap;

.col 
 flex-flow: column wrap;

.element 
 min-width: 100px;

.content 
 flex: 1 100%;

.structure 
 min-height: 480px;

.structure-2 
 flex: 1 44.4444444444%;

.f 
 flex: 1 25%;
 min-height: 480px;

.g 
 flex: 1 75%;

.h 
 flex: 1 75%;


@media (max-width : 768px )
.structure-2, .f, .g 
 flex: 1 50%;
 min-height: 480px;

.h 
 flex: 1 100%;
 min-height: 480px;

		<p>This table is a visual representation of what I am trying to accomplish at 769 px or higher. The view at 768 pixels or lower is as I want.</p>
		<table width="200" border="1">
 <tbody>
 <tr>
 <td rowspan="2">F</td>
 <td>G</td>
 </tr>
 <tr>
 <td>H</td>
 </tr>
 </tbody>
 </table>
 <div class="wrap">
 <div class="container card">
 <div class="flex row structure">
 <div class="flex row structure-2">
 <div class="flex element f">
 <div class="content"> F </div>
 </div>
 <div class="flex element g">
 <div class="content"> G </div>
 </div>
 <div class="flex element h">
 <div class="content"> H </div>
 </div>
 </div>
 </div>
 </div>
 </div>

edited Nov 9 at 18:51

asked Nov 9 at 17:12

echristo66

10910

Trying to arrange divs using Flexbox and not sure what I want to do is even possible.

Desired look at 769 pixels is to have column F expand down the entire height of the container on the left, and G and H stack on top of each other to the right (run the code snippet to see).

Once the screen resolution gets below 768 the look I have currently is the desired result for that view (F and G on the same row and H below spanning the width of both).

body 
 background: #f5f5f5;

.wrap 
 max-width: 1100px;
 margin: 0 auto;
 padding: 40px;

.title 
 font-family: 'Montserrat';
 font-size: 24px;
 line-height: 30px;
 display: inline-block;
 vertical-align: middle;

.card 
 margin: 20px 0;
 box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
 background-color: #fff;

.container.show-border, .element.show-border 
 border: 1px red solid;
 padding: 9px;

.content 
 color: #fff;
 background-color: #cccccc;
 padding: 20px;
 font-family: 'Montserrat';
 font-size: calc(1vw + 1em);


@media (max-width: 375px) 
.content 
 padding: 5px;
 font-size: 0;
 text-indent: -9999999em;


.container, .element 
 padding: 10px;

.flex 
 display: flex;
 box-sizing: border-box;

.row 
 flex-flow: row wrap;

.col 
 flex-flow: column wrap;

.element 
 min-width: 100px;

.content 
 flex: 1 100%;

.structure 
 min-height: 480px;

.structure-2 
 flex: 1 44.4444444444%;

.f 
 flex: 1 25%;
 min-height: 480px;

.g 
 flex: 1 75%;

.h 
 flex: 1 75%;


@media (max-width : 768px )
.structure-2, .f, .g 
 flex: 1 50%;
 min-height: 480px;

.h 
 flex: 1 100%;
 min-height: 480px;

		<p>This table is a visual representation of what I am trying to accomplish at 769 px or higher. The view at 768 pixels or lower is as I want.</p>
		<table width="200" border="1">
 <tbody>
 <tr>
 <td rowspan="2">F</td>
 <td>G</td>
 </tr>
 <tr>
 <td>H</td>
 </tr>
 </tbody>
 </table>
 <div class="wrap">
 <div class="container card">
 <div class="flex row structure">
 <div class="flex row structure-2">
 <div class="flex element f">
 <div class="content"> F </div>
 </div>
 <div class="flex element g">
 <div class="content"> G </div>
 </div>
 <div class="flex element h">
 <div class="content"> H </div>
 </div>
 </div>
 </div>
 </div>
 </div>

body 
 background: #f5f5f5;

.wrap 
 max-width: 1100px;
 margin: 0 auto;
 padding: 40px;

.title 
 font-family: 'Montserrat';
 font-size: 24px;
 line-height: 30px;
 display: inline-block;
 vertical-align: middle;

.card 
 margin: 20px 0;
 box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
 background-color: #fff;

.container.show-border, .element.show-border 
 border: 1px red solid;
 padding: 9px;

.content 
 color: #fff;
 background-color: #cccccc;
 padding: 20px;
 font-family: 'Montserrat';
 font-size: calc(1vw + 1em);


@media (max-width: 375px) 
.content 
 padding: 5px;
 font-size: 0;
 text-indent: -9999999em;


.container, .element 
 padding: 10px;

.flex 
 display: flex;
 box-sizing: border-box;

.row 
 flex-flow: row wrap;

.col 
 flex-flow: column wrap;

.element 
 min-width: 100px;

.content 
 flex: 1 100%;

.structure 
 min-height: 480px;

.structure-2 
 flex: 1 44.4444444444%;

.f 
 flex: 1 25%;
 min-height: 480px;

.g 
 flex: 1 75%;

.h 
 flex: 1 75%;


@media (max-width : 768px )
.structure-2, .f, .g 
 flex: 1 50%;
 min-height: 480px;

.h 
 flex: 1 100%;
 min-height: 480px;

		<p>This table is a visual representation of what I am trying to accomplish at 769 px or higher. The view at 768 pixels or lower is as I want.</p>
		<table width="200" border="1">
 <tbody>
 <tr>
 <td rowspan="2">F</td>
 <td>G</td>
 </tr>
 <tr>
 <td>H</td>
 </tr>
 </tbody>
 </table>
 <div class="wrap">
 <div class="container card">
 <div class="flex row structure">
 <div class="flex row structure-2">
 <div class="flex element f">
 <div class="content"> F </div>
 </div>
 <div class="flex element g">
 <div class="content"> G </div>
 </div>
 <div class="flex element h">
 <div class="content"> H </div>
 </div>
 </div>
 </div>
 </div>
 </div>

body 
 background: #f5f5f5;

.wrap 
 max-width: 1100px;
 margin: 0 auto;
 padding: 40px;

.title 
 font-family: 'Montserrat';
 font-size: 24px;
 line-height: 30px;
 display: inline-block;
 vertical-align: middle;

.card 
 margin: 20px 0;
 box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
 background-color: #fff;

.container.show-border, .element.show-border 
 border: 1px red solid;
 padding: 9px;

.content 
 color: #fff;
 background-color: #cccccc;
 padding: 20px;
 font-family: 'Montserrat';
 font-size: calc(1vw + 1em);


@media (max-width: 375px) 
.content 
 padding: 5px;
 font-size: 0;
 text-indent: -9999999em;


.container, .element 
 padding: 10px;

.flex 
 display: flex;
 box-sizing: border-box;

.row 
 flex-flow: row wrap;

.col 
 flex-flow: column wrap;

.element 
 min-width: 100px;

.content 
 flex: 1 100%;

.structure 
 min-height: 480px;

.structure-2 
 flex: 1 44.4444444444%;

.f 
 flex: 1 25%;
 min-height: 480px;

.g 
 flex: 1 75%;

.h 
 flex: 1 75%;


@media (max-width : 768px )
.structure-2, .f, .g 
 flex: 1 50%;
 min-height: 480px;

.h 
 flex: 1 100%;
 min-height: 480px;

		<p>This table is a visual representation of what I am trying to accomplish at 769 px or higher. The view at 768 pixels or lower is as I want.</p>
		<table width="200" border="1">
 <tbody>
 <tr>
 <td rowspan="2">F</td>
 <td>G</td>
 </tr>
 <tr>
 <td>H</td>
 </tr>
 </tbody>
 </table>
 <div class="wrap">
 <div class="container card">
 <div class="flex row structure">
 <div class="flex row structure-2">
 <div class="flex element f">
 <div class="content"> F </div>
 </div>
 <div class="flex element g">
 <div class="content"> G </div>
 </div>
 <div class="flex element h">
 <div class="content"> H </div>
 </div>
 </div>
 </div>
 </div>
 </div>

html css flexbox

edited Nov 9 at 18:51

asked Nov 9 at 17:12

echristo66

10910

edited Nov 9 at 18:51

asked Nov 9 at 17:12

echristo66

10910

edited Nov 9 at 18:51

asked Nov 9 at 17:12

echristo66

10910

asked Nov 9 at 17:12

echristo66

10910

asked Nov 9 at 17:12

echristo66

10910

I think for the first one, you would need to flex direction column with column wrap, then use the media query to change to rows for the second one
– Pete
Nov 9 at 17:27

This seems the perfect scenario for grid layout, do you need to use flexboxes?
– Becks
Nov 9 at 18:15

Updated the media query to 768px, sorry that was an odd typo on my part. I will look at grid layout too. thanks!
– echristo66
Nov 9 at 18:53

add a comment |

I think for the first one, you would need to flex direction column with column wrap, then use the media query to change to rows for the second one
– Pete
Nov 9 at 17:27

This seems the perfect scenario for grid layout, do you need to use flexboxes?
– Becks
Nov 9 at 18:15

Updated the media query to 768px, sorry that was an odd typo on my part. I will look at grid layout too. thanks!
– echristo66
Nov 9 at 18:53

I think for the first one, you would need to flex direction column with column wrap, then use the media query to change to rows for the second one
– Pete
Nov 9 at 17:27

This seems the perfect scenario for grid layout, do you need to use flexboxes?
– Becks
Nov 9 at 18:15

Updated the media query to 768px, sorry that was an odd typo on my part. I will look at grid layout too. thanks!
– echristo66
Nov 9 at 18:53

add a comment |

2 Answers
2

active

oldest

votes

up vote
1
down vote

accepted

You could change the flex-direction after 769px;. Something like this:

@media (min-width: 769px )
 .structure-2
 flex-direction: column;
 flex-wrap: wrap;
 

 .element
 flex: 1 1 auto;
 width:50%;
 

 .f
 height:100%;

P.S. I changed also your @media (max-width : 1608px ) to @media (max-width : 768px ) to remove some conflicts.

body 
 background: #f5f5f5;

.wrap 
 max-width: 1100px;
 margin: 0 auto;
 padding: 40px;

.title 
 font-family: 'Montserrat';
 font-size: 24px;
 line-height: 30px;
 display: inline-block;
 vertical-align: middle;

.card 
 margin: 20px 0;
 box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
 background-color: #fff;

.container.show-border, .element.show-border 
 border: 1px red solid;
 padding: 9px;

.content 
 color: #fff;
 background-color: #cccccc;
 padding: 20px;
 font-family: 'Montserrat';
 font-size: calc(1vw + 1em);


@media (max-width: 375px) 
.content 
 padding: 5px;
 font-size: 0;
 text-indent: -9999999em;


.container, .element 
 padding: 10px;

.flex 
 display: flex;
 box-sizing: border-box;

.row 
 flex-flow: row wrap;

.col 
 flex-flow: column wrap;

.element 
 min-width: 100px;

.content 
 flex: 1 100%;

.structure 
 min-height: 480px;

.structure-2 
 flex: 1 44.4444444444%;

.f 
 flex: 1 25%;
 min-height: 480px;

.g 
 flex: 1 75%;

.h 
 flex: 1 75%;


@media (max-width : 768px )
 .structure-2, .f, .g 
 flex: 1 50%;
 min-height: 480px;
 
 .h 
 flex: 1 100%;
 min-height: 480px;
 


@media (min-width: 769px )
 .structure-2
 flex-direction: column;
 flex-wrap: wrap;
 
 
 .element
 flex: 1 1 auto;
 width:50%;
 

 .f
 height:100%;

<div class="wrap">
 <div class="container card">
 <div class="flex row structure">
 <div class="flex row structure-2">
 <div class="flex element f">
 <div class="content"> F </div>
 </div>
 <div class="flex element g">
 <div class="content"> G </div>
 </div>
 <div class="flex element h">
 <div class="content"> H</div>
 </div>
 </div>
 </div>
 </div>
</div>

answered Nov 9 at 18:16

ReSedano

2,4802415

That works! Thank you and thanks for catching the typo "1608" too.
– echristo66
Nov 9 at 19:00

You're welcome! :-)
– ReSedano
Nov 9 at 20:00

add a comment |

up vote
0
down vote

When device width is under 769px:

 - class ".f" will take the whole width - 100%

 - classes ".g, .h" will take the half width - 50%





 @media (max-width: 769px) 
 .f 
 flex: 1 100%;
 
 .g,
 .h 
 flex:0 50%;

edited Nov 10 at 14:55

answered Nov 9 at 18:04

Nakov

386

3

I doubt the answer is helpful to anyone without some sort of explanation as to how it works or what the code does. What is obvious to you is not to the OP (which is why the question was posted)
– ochi
Nov 9 at 19:36

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Poul Bak
Nov 10 at 3:38

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53230410%2fflexbox-css-arrangment-of-divs%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
1
down vote

accepted

You could change the flex-direction after 769px;. Something like this:

@media (min-width: 769px )
 .structure-2
 flex-direction: column;
 flex-wrap: wrap;
 

 .element
 flex: 1 1 auto;
 width:50%;
 

 .f
 height:100%;

P.S. I changed also your @media (max-width : 1608px ) to @media (max-width : 768px ) to remove some conflicts.

body 
 background: #f5f5f5;

.wrap 
 max-width: 1100px;
 margin: 0 auto;
 padding: 40px;

.title 
 font-family: 'Montserrat';
 font-size: 24px;
 line-height: 30px;
 display: inline-block;
 vertical-align: middle;

.card 
 margin: 20px 0;
 box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
 background-color: #fff;

.container.show-border, .element.show-border 
 border: 1px red solid;
 padding: 9px;

.content 
 color: #fff;
 background-color: #cccccc;
 padding: 20px;
 font-family: 'Montserrat';
 font-size: calc(1vw + 1em);


@media (max-width: 375px) 
.content 
 padding: 5px;
 font-size: 0;
 text-indent: -9999999em;


.container, .element 
 padding: 10px;

.flex 
 display: flex;
 box-sizing: border-box;

.row 
 flex-flow: row wrap;

.col 
 flex-flow: column wrap;

.element 
 min-width: 100px;

.content 
 flex: 1 100%;

.structure 
 min-height: 480px;

.structure-2 
 flex: 1 44.4444444444%;

.f 
 flex: 1 25%;
 min-height: 480px;

.g 
 flex: 1 75%;

.h 
 flex: 1 75%;


@media (max-width : 768px )
 .structure-2, .f, .g 
 flex: 1 50%;
 min-height: 480px;
 
 .h 
 flex: 1 100%;
 min-height: 480px;
 


@media (min-width: 769px )
 .structure-2
 flex-direction: column;
 flex-wrap: wrap;
 
 
 .element
 flex: 1 1 auto;
 width:50%;
 

 .f
 height:100%;

<div class="wrap">
 <div class="container card">
 <div class="flex row structure">
 <div class="flex row structure-2">
 <div class="flex element f">
 <div class="content"> F </div>
 </div>
 <div class="flex element g">
 <div class="content"> G </div>
 </div>
 <div class="flex element h">
 <div class="content"> H</div>
 </div>
 </div>
 </div>
 </div>
</div>

answered Nov 9 at 18:16

ReSedano

2,4802415

That works! Thank you and thanks for catching the typo "1608" too.
– echristo66
Nov 9 at 19:00

You're welcome! :-)
– ReSedano
Nov 9 at 20:00

add a comment |

up vote
1
down vote

accepted

You could change the flex-direction after 769px;. Something like this:

@media (min-width: 769px )
 .structure-2
 flex-direction: column;
 flex-wrap: wrap;
 

 .element
 flex: 1 1 auto;
 width:50%;
 

 .f
 height:100%;

P.S. I changed also your @media (max-width : 1608px ) to @media (max-width : 768px ) to remove some conflicts.

body 
 background: #f5f5f5;

.wrap 
 max-width: 1100px;
 margin: 0 auto;
 padding: 40px;

.title 
 font-family: 'Montserrat';
 font-size: 24px;
 line-height: 30px;
 display: inline-block;
 vertical-align: middle;

.card 
 margin: 20px 0;
 box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
 background-color: #fff;

.container.show-border, .element.show-border 
 border: 1px red solid;
 padding: 9px;

.content 
 color: #fff;
 background-color: #cccccc;
 padding: 20px;
 font-family: 'Montserrat';
 font-size: calc(1vw + 1em);


@media (max-width: 375px) 
.content 
 padding: 5px;
 font-size: 0;
 text-indent: -9999999em;


.container, .element 
 padding: 10px;

.flex 
 display: flex;
 box-sizing: border-box;

.row 
 flex-flow: row wrap;

.col 
 flex-flow: column wrap;

.element 
 min-width: 100px;

.content 
 flex: 1 100%;

.structure 
 min-height: 480px;

.structure-2 
 flex: 1 44.4444444444%;

.f 
 flex: 1 25%;
 min-height: 480px;

.g 
 flex: 1 75%;

.h 
 flex: 1 75%;


@media (max-width : 768px )
 .structure-2, .f, .g 
 flex: 1 50%;
 min-height: 480px;
 
 .h 
 flex: 1 100%;
 min-height: 480px;
 


@media (min-width: 769px )
 .structure-2
 flex-direction: column;
 flex-wrap: wrap;
 
 
 .element
 flex: 1 1 auto;
 width:50%;
 

 .f
 height:100%;

<div class="wrap">
 <div class="container card">
 <div class="flex row structure">
 <div class="flex row structure-2">
 <div class="flex element f">
 <div class="content"> F </div>
 </div>
 <div class="flex element g">
 <div class="content"> G </div>
 </div>
 <div class="flex element h">
 <div class="content"> H</div>
 </div>
 </div>
 </div>
 </div>
</div>

answered Nov 9 at 18:16

ReSedano

2,4802415

That works! Thank you and thanks for catching the typo "1608" too.
– echristo66
Nov 9 at 19:00

You're welcome! :-)
– ReSedano
Nov 9 at 20:00

add a comment |

up vote
1
down vote

accepted

You could change the flex-direction after 769px;. Something like this:

@media (min-width: 769px )
 .structure-2
 flex-direction: column;
 flex-wrap: wrap;
 

 .element
 flex: 1 1 auto;
 width:50%;
 

 .f
 height:100%;

P.S. I changed also your @media (max-width : 1608px ) to @media (max-width : 768px ) to remove some conflicts.

body 
 background: #f5f5f5;

.wrap 
 max-width: 1100px;
 margin: 0 auto;
 padding: 40px;

.title 
 font-family: 'Montserrat';
 font-size: 24px;
 line-height: 30px;
 display: inline-block;
 vertical-align: middle;

.card 
 margin: 20px 0;
 box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
 background-color: #fff;

.container.show-border, .element.show-border 
 border: 1px red solid;
 padding: 9px;

.content 
 color: #fff;
 background-color: #cccccc;
 padding: 20px;
 font-family: 'Montserrat';
 font-size: calc(1vw + 1em);


@media (max-width: 375px) 
.content 
 padding: 5px;
 font-size: 0;
 text-indent: -9999999em;


.container, .element 
 padding: 10px;

.flex 
 display: flex;
 box-sizing: border-box;

.row 
 flex-flow: row wrap;

.col 
 flex-flow: column wrap;

.element 
 min-width: 100px;

.content 
 flex: 1 100%;

.structure 
 min-height: 480px;

.structure-2 
 flex: 1 44.4444444444%;

.f 
 flex: 1 25%;
 min-height: 480px;

.g 
 flex: 1 75%;

.h 
 flex: 1 75%;


@media (max-width : 768px )
 .structure-2, .f, .g 
 flex: 1 50%;
 min-height: 480px;
 
 .h 
 flex: 1 100%;
 min-height: 480px;
 


@media (min-width: 769px )
 .structure-2
 flex-direction: column;
 flex-wrap: wrap;
 
 
 .element
 flex: 1 1 auto;
 width:50%;
 

 .f
 height:100%;

<div class="wrap">
 <div class="container card">
 <div class="flex row structure">
 <div class="flex row structure-2">
 <div class="flex element f">
 <div class="content"> F </div>
 </div>
 <div class="flex element g">
 <div class="content"> G </div>
 </div>
 <div class="flex element h">
 <div class="content"> H</div>
 </div>
 </div>
 </div>
 </div>
</div>

answered Nov 9 at 18:16

ReSedano

2,4802415

You could change the flex-direction after 769px;. Something like this:

@media (min-width: 769px )
 .structure-2
 flex-direction: column;
 flex-wrap: wrap;
 

 .element
 flex: 1 1 auto;
 width:50%;
 

 .f
 height:100%;

P.S. I changed also your @media (max-width : 1608px ) to @media (max-width : 768px ) to remove some conflicts.

body 
 background: #f5f5f5;

.wrap 
 max-width: 1100px;
 margin: 0 auto;
 padding: 40px;

.title 
 font-family: 'Montserrat';
 font-size: 24px;
 line-height: 30px;
 display: inline-block;
 vertical-align: middle;

.card 
 margin: 20px 0;
 box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
 background-color: #fff;

.container.show-border, .element.show-border 
 border: 1px red solid;
 padding: 9px;

.content 
 color: #fff;
 background-color: #cccccc;
 padding: 20px;
 font-family: 'Montserrat';
 font-size: calc(1vw + 1em);


@media (max-width: 375px) 
.content 
 padding: 5px;
 font-size: 0;
 text-indent: -9999999em;


.container, .element 
 padding: 10px;

.flex 
 display: flex;
 box-sizing: border-box;

.row 
 flex-flow: row wrap;

.col 
 flex-flow: column wrap;

.element 
 min-width: 100px;

.content 
 flex: 1 100%;

.structure 
 min-height: 480px;

.structure-2 
 flex: 1 44.4444444444%;

.f 
 flex: 1 25%;
 min-height: 480px;

.g 
 flex: 1 75%;

.h 
 flex: 1 75%;


@media (max-width : 768px )
 .structure-2, .f, .g 
 flex: 1 50%;
 min-height: 480px;
 
 .h 
 flex: 1 100%;
 min-height: 480px;
 


@media (min-width: 769px )
 .structure-2
 flex-direction: column;
 flex-wrap: wrap;
 
 
 .element
 flex: 1 1 auto;
 width:50%;
 

 .f
 height:100%;

<div class="wrap">
 <div class="container card">
 <div class="flex row structure">
 <div class="flex row structure-2">
 <div class="flex element f">
 <div class="content"> F </div>
 </div>
 <div class="flex element g">
 <div class="content"> G </div>
 </div>
 <div class="flex element h">
 <div class="content"> H</div>
 </div>
 </div>
 </div>
 </div>
</div>

body 
 background: #f5f5f5;

.wrap 
 max-width: 1100px;
 margin: 0 auto;
 padding: 40px;

.title 
 font-family: 'Montserrat';
 font-size: 24px;
 line-height: 30px;
 display: inline-block;
 vertical-align: middle;

.card 
 margin: 20px 0;
 box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
 background-color: #fff;

.container.show-border, .element.show-border 
 border: 1px red solid;
 padding: 9px;

.content 
 color: #fff;
 background-color: #cccccc;
 padding: 20px;
 font-family: 'Montserrat';
 font-size: calc(1vw + 1em);


@media (max-width: 375px) 
.content 
 padding: 5px;
 font-size: 0;
 text-indent: -9999999em;


.container, .element 
 padding: 10px;

.flex 
 display: flex;
 box-sizing: border-box;

.row 
 flex-flow: row wrap;

.col 
 flex-flow: column wrap;

.element 
 min-width: 100px;

.content 
 flex: 1 100%;

.structure 
 min-height: 480px;

.structure-2 
 flex: 1 44.4444444444%;

.f 
 flex: 1 25%;
 min-height: 480px;

.g 
 flex: 1 75%;

.h 
 flex: 1 75%;


@media (max-width : 768px )
 .structure-2, .f, .g 
 flex: 1 50%;
 min-height: 480px;
 
 .h 
 flex: 1 100%;
 min-height: 480px;
 


@media (min-width: 769px )
 .structure-2
 flex-direction: column;
 flex-wrap: wrap;
 
 
 .element
 flex: 1 1 auto;
 width:50%;
 

 .f
 height:100%;

<div class="wrap">
 <div class="container card">
 <div class="flex row structure">
 <div class="flex row structure-2">
 <div class="flex element f">
 <div class="content"> F </div>
 </div>
 <div class="flex element g">
 <div class="content"> G </div>
 </div>
 <div class="flex element h">
 <div class="content"> H</div>
 </div>
 </div>
 </div>
 </div>
</div>

body 
 background: #f5f5f5;

.wrap 
 max-width: 1100px;
 margin: 0 auto;
 padding: 40px;

.title 
 font-family: 'Montserrat';
 font-size: 24px;
 line-height: 30px;
 display: inline-block;
 vertical-align: middle;

.card 
 margin: 20px 0;
 box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
 background-color: #fff;

.container.show-border, .element.show-border 
 border: 1px red solid;
 padding: 9px;

.content 
 color: #fff;
 background-color: #cccccc;
 padding: 20px;
 font-family: 'Montserrat';
 font-size: calc(1vw + 1em);


@media (max-width: 375px) 
.content 
 padding: 5px;
 font-size: 0;
 text-indent: -9999999em;


.container, .element 
 padding: 10px;

.flex 
 display: flex;
 box-sizing: border-box;

.row 
 flex-flow: row wrap;

.col 
 flex-flow: column wrap;

.element 
 min-width: 100px;

.content 
 flex: 1 100%;

.structure 
 min-height: 480px;

.structure-2 
 flex: 1 44.4444444444%;

.f 
 flex: 1 25%;
 min-height: 480px;

.g 
 flex: 1 75%;

.h 
 flex: 1 75%;


@media (max-width : 768px )
 .structure-2, .f, .g 
 flex: 1 50%;
 min-height: 480px;
 
 .h 
 flex: 1 100%;
 min-height: 480px;
 


@media (min-width: 769px )
 .structure-2
 flex-direction: column;
 flex-wrap: wrap;
 
 
 .element
 flex: 1 1 auto;
 width:50%;
 

 .f
 height:100%;

<div class="wrap">
 <div class="container card">
 <div class="flex row structure">
 <div class="flex row structure-2">
 <div class="flex element f">
 <div class="content"> F </div>
 </div>
 <div class="flex element g">
 <div class="content"> G </div>
 </div>
 <div class="flex element h">
 <div class="content"> H</div>
 </div>
 </div>
 </div>
 </div>
</div>

answered Nov 9 at 18:16

ReSedano

2,4802415

answered Nov 9 at 18:16

ReSedano

2,4802415

answered Nov 9 at 18:16

ReSedano

2,4802415

answered Nov 9 at 18:16

ReSedano

2,4802415

That works! Thank you and thanks for catching the typo "1608" too.
– echristo66
Nov 9 at 19:00

You're welcome! :-)
– ReSedano
Nov 9 at 20:00

add a comment |

That works! Thank you and thanks for catching the typo "1608" too.
– echristo66
Nov 9 at 19:00

You're welcome! :-)
– ReSedano
Nov 9 at 20:00

That works! Thank you and thanks for catching the typo "1608" too.
– echristo66
Nov 9 at 19:00

You're welcome! :-)
– ReSedano
Nov 9 at 20:00

add a comment |

up vote
0
down vote

When device width is under 769px:

 - class ".f" will take the whole width - 100%

 - classes ".g, .h" will take the half width - 50%





 @media (max-width: 769px) 
 .f 
 flex: 1 100%;
 
 .g,
 .h 
 flex:0 50%;

edited Nov 10 at 14:55

answered Nov 9 at 18:04

Nakov

386

3

I doubt the answer is helpful to anyone without some sort of explanation as to how it works or what the code does. What is obvious to you is not to the OP (which is why the question was posted)
– ochi
Nov 9 at 19:36

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Poul Bak
Nov 10 at 3:38

add a comment |

up vote
0
down vote

When device width is under 769px:

 - class ".f" will take the whole width - 100%

 - classes ".g, .h" will take the half width - 50%





 @media (max-width: 769px) 
 .f 
 flex: 1 100%;
 
 .g,
 .h 
 flex:0 50%;

edited Nov 10 at 14:55

answered Nov 9 at 18:04

Nakov

386

3

I doubt the answer is helpful to anyone without some sort of explanation as to how it works or what the code does. What is obvious to you is not to the OP (which is why the question was posted)
– ochi
Nov 9 at 19:36

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Poul Bak
Nov 10 at 3:38

add a comment |

up vote
0
down vote

When device width is under 769px:

 - class ".f" will take the whole width - 100%

 - classes ".g, .h" will take the half width - 50%





 @media (max-width: 769px) 
 .f 
 flex: 1 100%;
 
 .g,
 .h 
 flex:0 50%;

edited Nov 10 at 14:55

answered Nov 9 at 18:04

Nakov

386

When device width is under 769px:

 - class ".f" will take the whole width - 100%

 - classes ".g, .h" will take the half width - 50%





 @media (max-width: 769px) 
 .f 
 flex: 1 100%;
 
 .g,
 .h 
 flex:0 50%;

edited Nov 10 at 14:55

answered Nov 9 at 18:04

Nakov

386

edited Nov 10 at 14:55

answered Nov 9 at 18:04

Nakov

386

answered Nov 9 at 18:04

Nakov

386

answered Nov 9 at 18:04

Nakov

386

3

I doubt the answer is helpful to anyone without some sort of explanation as to how it works or what the code does. What is obvious to you is not to the OP (which is why the question was posted)
– ochi
Nov 9 at 19:36

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Poul Bak
Nov 10 at 3:38

add a comment |

3

I doubt the answer is helpful to anyone without some sort of explanation as to how it works or what the code does. What is obvious to you is not to the OP (which is why the question was posted)
– ochi
Nov 9 at 19:36

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Poul Bak
Nov 10 at 3:38

I doubt the answer is helpful to anyone without some sort of explanation as to how it works or what the code does. What is obvious to you is not to the OP (which is why the question was posted)
– ochi
Nov 9 at 19:36

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review
– Poul Bak
Nov 10 at 3:38

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb