I need help with getting Bootstrap layout as per image below. I cant figure out how to get the yellow bar to appear with the full width of the Bootstrap container without affecting the way the columns should stack up on the mobile view (second image).
So I dont need the yellow bar to be displayed on mobile view but the order of how the columns stack up has to be preserved. I have tried inserting a div in the middle column and force it to go outside of it but it didnt really work (the closest I got was with negative margin but that just overlaps the other columns and I dont really know exact number I should apply for each margin to make it look good).
Below is my HTML structure - I have removed the yellow bar part as I dont really know where it should go...
<div class="col-md-4">
col 1 header<br/>col 1 contents
</div>
<div class="col-md-4">
col 2 header<br/>col 2 contents
</div>
<div class="col-md-4">
col 3 header<br/>col 3 contents
</div>
If anyone can advise if thats possible to do with Bootstrap and give me some direction it would be much appreciated.
if cols headers and yellow div has fixed height you can margin between header and content and set yellow div by absolute between them
Bootstrap classes for push and pull cols for different devices can help.
Just put xs instead of lg and refer the following link.
Bootstrap 3: pull-right for col-lg only
and for hiding your yellow div, use .hidden-xs
You can use col-xs-pull-6 or col-xs-pull-12 on your content.
I would have solved it if you mentioned your code in your question.
Instead of Bootstrap I think the best way is using flexbox. You have to reorder all the divs to get desired effect but with Bootstrap columns you will find many problems. This is my solution (resize to view how it works):
*{
box-sizing: border-box;
}
.wrapper div {
border-width: 2px;
border-style: solid;
padding: 5px;
}
.wrapper div:nth-child(1),
.wrapper div:nth-child(2) {
border-color: red;
}
.wrapper div:nth-child(3),
.wrapper div:nth-child(4) {
border-color: blue;
}
.wrapper div:nth-child(5),
.wrapper div:nth-child(6) {
border-color: green;
}
.wrapper .yellow {
display: none;
}
#media (min-width:768px) {
.wrapper {
display: flex;
flex-wrap: wrap;
}
.wrapper div {
flex: 1 1 33%;
}
.wrapper div:nth-child(1) {
order: 1;
}
.wrapper div:nth-child(2) {
order: 5;
}
.wrapper div:nth-child(3) {
order: 2;
}
.wrapper div:nth-child(4) {
order: 6;
}
.wrapper div:nth-child(5) {
order: 3;
}
.wrapper div:nth-child(6) {
order: 7;
}
.wrapper .yellow {
display: block;
border-color: yellow;
order: 3;
flex: 0 0 100%;
text-align: center;
}
}
<div class="wrapper">
<div>col 1 header</div>
<div>col 1 contents</div>
<div>col 2 header</div>
<div>col 2 contents</div>
<div>col 3 header</div>
<div>col 3 contents</div>
<div class="yellow">div with full width</div>
</div>
Related
This question already has answers here:
Left column and stacked right column using flexbox CSS [duplicate]
(2 answers)
Closed last year.
I have been trying many different methods to achieve the following but could not.
I tried using media query to change the order of the children within the flex box of the div that contains all 3 but it seems like I can only do so when all 3 children are divs. However when all 3 children are divs, I cannot achieve the desktop outcome. Basically the header and the paragraph text will each take a column.
Any help would be greatly appreciated.
Exiting code: https://codepen.io/lionellloh/pen/BawVpjm
<div class="parent">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/27/Red_square.svg">
<h1> This is a header </h1>
<p> This is some body text that is very interesting </p>
</div>
.parent {
display: flex;
flex-wrap: wrap;
}
#media only screen and (max-width: 900px) {
.parent :nth-child(1) {
order: 2;
}
.parent :nth-child(2) {
order: 1;
}
.parent :nth-child(3) {
order: 3;
}
}
You may like to look at grid which will allow you to name areas and assign elements to them.
Then you can redefine the areas when the max-width is at some value.
This saves having to go through all the affected elements and specify their order.
Here's a simple snippet. It puts a background color on each element so you can see which is being allocated to where.
Obviously you'll want to look at exactly the proportions you want the header to take up compared to the paragraph and so on but this is to get you started.
.container {
display: grid;
min-width: 600px;
width: 25%;
aspect-ratio: 1 / 1;
gap: 10px;
grid-template-areas:
'I H'
'I P'
'I P'
'I P';
background: pink;
grid-template-columns: 1fr 1fr;
}
h1 {
grid-area: H;
background: cyan;
}
img {
grid-area: I;
background: magenta;
object-fit: cover;
width: 100%;
height: 100%;
}
p {
grid-area: P;
background: yellow;
}
#media (max-width: 600px) {
.container {
grid-template-areas:
'H'
'I'
'P';
}
}
<div class="container">
<h1>Heading</h1>
<img src="https://picsum.photos/id/1015/200/600">
<p>Paragraph text<br>Paragraph text<br>Paragraph text<br>Paragraph text<br>Paragraph text<br></p>
</div>
The CSS property you're looking for is (quite aptly) named order.
The order property controls the order in which flex items appear
within the flex container, by assigning them to ordinal groups. It
takes a single value, which specifies which ordinal group
the flex item belongs to.
https://www.w3.org/TR/css-flexbox-1/#order-property
So in your example, you would explicitly set the order on all 3 elements, and then within a media query override the order for one/some of the elements to adapt to the "other" layout.
Update: I see you've updated the question but didn't really have any content at all yet. In that case i'd advise going with grid instead of flex. Which is very much alike but has a few features that make it better suited for what you describe.
You could go with something like this:
.parent {
display: grid;
grid: 'heading'
'imagearea'
'content';
}
img { grid-area: imagearea; }
h1 { grid-area: heading; }
p { grid-area: content; }
#media only screen and (max-width: 900px) {
.parent {
grid-template-areas:
'imagearea heading'
'imagearea content';
}
}
/* unrelated CSS; just to show borders */
.parent > * { margin: 0; border: 2px solid black; background-color: #DEFFDE; }
<div class="parent">
<h1>This is a header</h1>
<p>This is some body text that is very interesting</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/2/27/Red_square.svg">
</div>
Thank you for making suggestions that fit my skills.
<div class="parent">
<img src="https://upload.wikimedia.org/wikipedia/commons/2/27/Red_square.svg">
<div class="content">
<h1> This is a header </h1>
<p> This is some body text that is very interesting </p>
</div>
</div>
<style>
.parent {
display:flex;
flex-direction:row;
justify-content: space-between;
}
.content {
display:flex;
flex-direction:colume;
justify-content: space-between;
}
#media screen and (min-width:512px) {
.parent {
display:flex;
flex-direction:colume;
justify-content: space-between;
}
}
</style>
Thanks
As you can see in the snippet, I have 2 columns, however, I want to make it so that the red column goes under the blue one ( and they both take 100% of the parent width ) when the browser becomes less than 1200px.
Now if I were using 2 inline-block elements I would just create a media query that would make both elements block, however, now that I'm trying to use flexbox, I'm not sure how to do this.
.specific-image-container {
display: flex;
position: relative;
width: 100%;
}
.specific-image-column {
flex: 4;
background-color: blue;
}
.more-images-column {
flex: 1;
background-color: red;
}
.content {
height: 300px;
}
<div class="specific-image-container">
<div class="specific-image-column">
<div class='content'>s</div>
</div>
<div class="more-images-column">
<div class='content'>s</div>
</div>
</div>
Set flex-direction to column within a media query
#media all and (max-width: 1200px) {
.specific-image-container {
flex-direction: column;
}
}
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Make a div span two rows in a grid
(2 answers)
Closed 5 years ago.
I am trying to have one div on the left and two on the right. The bottomright should always be below the topRight div. The topRight is the only div with a variable height.
I am currently trying to achieve this using flexbox als you can see in my code below.
I would like to have some directions.
.wrapper {
display: flex;
height: 100px;
}
.left {
background-color: green
}
.topRight {
background-color: yellow
}
.bottomright {
background-color: red
}
<div class="wrapper">
<div class="left">Left</div>
<div class="topRight">TopRight</div>
<div class="bottomright">Bottom</div>
</div
With a fixed height on the container, as you have in your code, you can use flex-direction: column and flex-wrap: wrap. The fixed height serves as a break point, telling flex items where to wrap.
.wrapper {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100px;
}
.left {
flex: 0 0 100%; /* consumes full height of first column; forces siblings to wrap */
background-color: lightgreen
}
/* variable height div */
.topRight {
background-color: yellow
}
.bottomright {
flex: 1; /* consumes remaining space in column */
background-color: red
}
<div class="wrapper">
<div class="left">Left</div>
<div class="topRight">TopRight<br>variable height</div>
<div class="bottomright">Bottom</div>
</div>
On html put a div with a class called right wrapping both topRight and bottomRight and use this css on css:
.wrapper {
display: flex;
height: 100px;
}
.right {
display: flex-flow;
}
.left {
background-color: green
}
.topRight {
background-color: yellow;
height: 50px;
}
.bottomright {
background-color: red;
height: 50px;
}
I hope that helps you :)
For infos
display:grid is made for this .... very soon available for most browsers and yet for a few
A tutorial among others : https://css-tricks.com/snippets/css/complete-guide-grid/
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* any height s */
background-color: green;
}
.leftspan {
grid-row: span 2;/* if 2 rows avalaible */
}
.topRight {
background-color: yellow;
grid-column: 2 /-1
}
.bottomright {
background-color: red;
grid-column: 2 /-1
}
.bottomfull {
background-color: red;
grid-column: 1 /-1
}
<div class="wrapper">
<div class="leftspan">Left spanning 2 rows</div>
<div class="topRight">Top <br/>Right</div>
<div class="bottomright">Bottom <br/>Right</div>
</div>
<p> or did you mean ?
<div class="wrapper">
<div class="left">Left</div>
<div class="topRight">Top Right</div>
<div class="bottomfull">Bottom <br/>Right</div>
</div>
render if your browsers understand grid:
I am working on a responsive site and came across an interesting problem. I have some divs side by side. There could be anywhere from 2 to 6 or so of them. When the screen isn't wide enough to show all the content properly, the divs stack vertically. Simple enough to do with CSS.
The problem is, I need them to be in a different order depending on the layout. This is easy to do with 2 or 3 divs (Changing divs order based on width), but significantly more challenging when you add a fourth.
I could use position: absolute; and manually set the position, however this causes the parent to shrink and not contain them properly.
To make this even more complicated, I can't use JavaScript.
Working with two columns:
(untested)
HTML:
<div id="container">
<div class="column-half column-half-2">
First div on mobile, right div on desktop
</div>
<div class="column-half column-half-1">
Second div on mobile, left div on desktop
</div>
</div>
CSS:
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 20px;
position: relative;
}
.column-half {
display: table-cell;
padding: 25px;
vertical-align: top;
width: 40%;
}
.column-half-1 {
float: left;
}
.column-half-2 {
float: right;
}
HTML, with 4 columns:
<div id="container">
<div class="column-quarter column-quarter-3">
First div on mobile, third div on desktop
</div>
<div class="column-quarter column-quarter-2">
Second div on mobile, second div on desktop
</div>
<div class="column-quarter column-quarter-1">
Third div on mobile, first div on desktop
</div>
<div class="column-quarter column-quarter-4">
Fourth div on mobile, fourth div on desktop
</div>
</div>
This is doable in CSS thanks to the wonderful flexbox spec. Using the order and flex-flow properties, we can achieve what you want. Unprefixed, IE11 and all evergreen browsers will support this. IE10 prefixes -ms-order and doesn't support flex-flow.
The solution takes into consideration all the constraints you listed:
Have a list of elements in a given order displayed as a row.
When the window is too small, change them to display in a column.
Change the order of the elements when they are displayed in a column.
Because of the limitations of Stack Snippets, you'll need to view the demo in Full page mode, and resize your browser to see the effect.
.container div {
width: 100px;
height: 50px;
display: inline-block;
}
.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }
#media screen and (max-width: 531px) {
.container { display: flex; flex-flow: column; }
.five { order: 1; }
.four { order: 2; }
.three { order: 3; }
.two { order: 4; }
.one { order: 5 }
}
<div class="container">
<div class="one">I'm first</div>
<div class="two">I'm second</div>
<div class="three">I'm third</div>
<div class="four">I'm fourth</div>
<div class="five">I'm fifth</div>
</div>
Alternatively, here is a JSFiddle demo.
You can also simply use flex-flow: column-reverse without the order property assigned to each div, if you are so inclined against verbose CSS. The same demo restrictions apply; view this demo in full screen and resize the browser window accordingly.
.container div {
width: 100px;
height: 50px;
display: inline-block;
}
.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }
#media screen and (max-width: 531px) {
.container { display: flex; flex-flow: column-reverse; }
}
<div class="container">
<div class="one">I'm first</div>
<div class="two">I'm second</div>
<div class="three">I'm third</div>
<div class="four">I'm fourth</div>
<div class="five">I'm fifth</div>
</div>
It's worth pointing out that flex-flow is a shorthand property encompassing both flex-direction and flex-wrap properties.
I am working on a responsive site and came across an interesting problem. I have some divs side by side. There could be anywhere from 2 to 6 or so of them. When the screen isn't wide enough to show all the content properly, the divs stack vertically. Simple enough to do with CSS.
The problem is, I need them to be in a different order depending on the layout. This is easy to do with 2 or 3 divs (Changing divs order based on width), but significantly more challenging when you add a fourth.
I could use position: absolute; and manually set the position, however this causes the parent to shrink and not contain them properly.
To make this even more complicated, I can't use JavaScript.
Working with two columns:
(untested)
HTML:
<div id="container">
<div class="column-half column-half-2">
First div on mobile, right div on desktop
</div>
<div class="column-half column-half-1">
Second div on mobile, left div on desktop
</div>
</div>
CSS:
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 20px;
position: relative;
}
.column-half {
display: table-cell;
padding: 25px;
vertical-align: top;
width: 40%;
}
.column-half-1 {
float: left;
}
.column-half-2 {
float: right;
}
HTML, with 4 columns:
<div id="container">
<div class="column-quarter column-quarter-3">
First div on mobile, third div on desktop
</div>
<div class="column-quarter column-quarter-2">
Second div on mobile, second div on desktop
</div>
<div class="column-quarter column-quarter-1">
Third div on mobile, first div on desktop
</div>
<div class="column-quarter column-quarter-4">
Fourth div on mobile, fourth div on desktop
</div>
</div>
This is doable in CSS thanks to the wonderful flexbox spec. Using the order and flex-flow properties, we can achieve what you want. Unprefixed, IE11 and all evergreen browsers will support this. IE10 prefixes -ms-order and doesn't support flex-flow.
The solution takes into consideration all the constraints you listed:
Have a list of elements in a given order displayed as a row.
When the window is too small, change them to display in a column.
Change the order of the elements when they are displayed in a column.
Because of the limitations of Stack Snippets, you'll need to view the demo in Full page mode, and resize your browser to see the effect.
.container div {
width: 100px;
height: 50px;
display: inline-block;
}
.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }
#media screen and (max-width: 531px) {
.container { display: flex; flex-flow: column; }
.five { order: 1; }
.four { order: 2; }
.three { order: 3; }
.two { order: 4; }
.one { order: 5 }
}
<div class="container">
<div class="one">I'm first</div>
<div class="two">I'm second</div>
<div class="three">I'm third</div>
<div class="four">I'm fourth</div>
<div class="five">I'm fifth</div>
</div>
Alternatively, here is a JSFiddle demo.
You can also simply use flex-flow: column-reverse without the order property assigned to each div, if you are so inclined against verbose CSS. The same demo restrictions apply; view this demo in full screen and resize the browser window accordingly.
.container div {
width: 100px;
height: 50px;
display: inline-block;
}
.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }
#media screen and (max-width: 531px) {
.container { display: flex; flex-flow: column-reverse; }
}
<div class="container">
<div class="one">I'm first</div>
<div class="two">I'm second</div>
<div class="three">I'm third</div>
<div class="four">I'm fourth</div>
<div class="five">I'm fifth</div>
</div>
It's worth pointing out that flex-flow is a shorthand property encompassing both flex-direction and flex-wrap properties.