I have two divs,
<div class="col-md-6"> First Content </div>
<div class="col-md-6"> Second Content </div>
When it is full screen, I want to show the "First content" first and then the "Second Content", but when the screen size is small, I want to show the "Second Content" first and below it the "First Content".
Is there a way? I want to implement this with raw css or bootstrap.
I think the answer you are looking for is using flex-wrap: wrap-reverse. Something like this:
#wrapper{
display: flex;
flex-wrap: wrap;
text-align:center;
}
.first, .second{
width: 400px;
margin: auto;
height:400px;
}
.first{
background: red;
}
.second{
background:yellow;
}
#media only screen and (max-width:500px){
#wrapper{
flex-wrap:wrap-reverse;
}
}
<div id="wrapper">
<div class="first">First</div>
<div class="second">Second</div>
</div>
Related
I have a simple 2-column layout with 3 sections. Depending on a media query, I want to change the order of them - for this I am using flex order.
This works fine, except I get my narrow sidebar section starting at the end of the first section, or similar to this. Is there a way I can get them to position more like jigsaw pieces?
Fiddle example of issue:
https://jsfiddle.net/an7m3yvs/
HTML:
<div class="page-wrapper">
<div class="container">
<div class="box1">
BOX 1
</div>
<div class="box2">
BOX 2
</div>
<div class="box3">
BOX 3 Sidebar
</div>
</div>
</div>
CSS:
.page-wrapper{
width:100%;
max-width:500px;
margin:0 auto;
}
.container{
display:flex;
flex-wrap:wrap;
}
.box1{
display:inline-block;
background:red;
width:70%;
height:400px;
order:1;
}
.box2{
display:inline-block;
background:green;
width:70%;
height:150px;
order:2;
}
.box3{
display:inline-block;
background:grey;
width:30%;
height:600px;
order:3;
}
How I want it:
(I know this can be done simpler but the idea is so I can change the order with a media query, as in mobile I want a single column and them in a different order.)
GRID ATTEMPT: https://jsfiddle.net/w489b2fj/
The 3rd element is not positioned according to the first element but to its predecessor. The sidebar will occupy the remaining space after the 2nd element and not the 1st.
To achieve the desired result, I think it is better to manage 2 flexbox containers. The first includes box1 and box2. The second includes box container and the sidebar.
Edit HTML:
<div class="page-wrapper">
<div class="container">
<div class="content-wrapper">
<div class="box1">
BOX 1
</div>
<div class="box2">
BOX 2
</div>
</div>
<div class="box3">
BOX 3 Sidebar
</div>
</div>
</div>
And edit the CSS:
.container, .content-wrapper{
display:flex;
flex-wrap:wrap;
}
.content-wrapper {
width: 70%;
}
.box1, .box2 {
width: 100%;
}
EDIT:
Ok, with this new information I have another solution:
.container {
position: relative;
}
.box3 {
position: absolute;
top: 0;
right: 0;
}
You can achieve that by adding flex-direction: column; to the container. But in this case (in order to wrap the items) you also need to set a fixed height, in your case height: 550px;.
And actually, you don't need the order settings for the flex items in this simple case...
.page-wrapper {
width: 100%;
max-width: 500px;
margin: 0 auto;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 550px;
}
.box1 {
display: inline-block;
background: red;
width: 70%;
height: 400px;
order: 1;
}
.box2 {
display: inline-block;
background: green;
width: 70%;
height: 150px;
order: 2;
}
.box3 {
display: inline-block;
background: grey;
width: 30%;
height: 600px;
order: 3;
}
<div class="page-wrapper">
<div class="container">
<div class="box1">
BOX 1
</div>
<div class="box2">
BOX 2
</div>
<div class="box3">
BOX 3 Sidebar
</div>
</div>
</div>
You wanted an answer using CSS Grid, where box3 places inbetween box1 and box2 in mobile viewports. Here you are:
.container{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"box1"
"box3"
"box2"
}
#media (min-width:768px){
.container{
display:grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"box1 box3"
"box2 box3"
}
}
.box1{
grid-area: box1;
background-color: #f00;
}
.box2{
grid-area: box2;
background-color: #0f0;
}
.box3{
grid-area: box3;
background-color: #00f;
}
<div class="page-wrapper">
<div class="container">
<div class="box1">
BOX 1
</div>
<div class="box2">
BOX 2
</div>
<div class="box3">
BOX 3 Sidebar
</div>
</div>
</div>
Try using position property and place the boxes relative to page wrapper.
if you can change HTML ( and always make good structure ) try this:
do the flex on c1 and c2 elements and you simply remove all inline-block instructions
<div class="page-wrapper">
<div class="container">
<div class=c1>
<div class="box1">
BOX 1
</div>
<div class="box2">
BOX 2
</div>
</div>
<div class=c2>
<div class="box3">
BOX 3 Sidebar
</div>
</div>
</div>
And css:
.page-wrapper{
width:100%;
max-width:500px;
margin:0 auto;
}
.container{
display:flex;
}
.box1{
background:red;
height:200px;
order:2;
}
.box2{
background:green;
height:150px;
order:1;
}
.box3{
background:grey;
width:100%;
height:400px;
}
.c2{
width:30%;
flex-basis:1;
}
.c1{
display:flex;
flex-direction:column;
width:70%;
flex-basis:1;
}
I need my two blocks to go in a row one after another, but when the screen resolution decreases, they are placed under each other, that is, in the column
<div>
<div>
<h1>Block1</h1>
</div>
<div>
<h1>Block2</h1>
</div>
</div>
We can use flex (by default flex-direction is row so we don't need any other styling in css) -:
<div class="container">
<div>
<h1>Block1</h1>
</div>
<div>
<h1>Block2</h1>
</div>
</div>
.container{
display: flex;
}
Also this is one way of doing things, flex is not supported everywhere so you can go for inline-block also -:
<div>
<div class="inline">
<h1>Block1</h1>
</div>
<div class="inline">
<h1>Block2</h1>
</div>
</div>
.inline{
display: inline-block;
}
As the div element is known as a block element, you need to use display:inline-block. This means 'if there is space next to the element, place the next inline block element next to it' (in essence).
div {
display: inline-block;
background:tomato;
}
#media only screen and (max-width: 600px) {
div{
display:block;
background:green;
}
<div>
<div>1
</div>
<div>2
</div>
</div>
For your width to then turn back into a block element, you will need to use the media query - something like above.
You should use CSS grid:
<div class="wrapper">
<div>
<h1>Block1</h1>
</div>
<div>
<h1>Block2</h1>
</div>
</div>
Css:
.wrapper{
diplay: grid;
grid-template-columns: 1fr;
}
Try using display:flex and use flexbox to place next to each other when the width is high. When the width reduces the div cols will go down.
.row {
width: 100vw;
display: flex;
flex-wrap: wrap;
}
.cols {
height: 400px;
width: 400px;
margin: 5px 5px 5px 5px;
background-color: blue;
}
<div class="row">
<div class="cols">
</div>
<div class="cols">
</div>
</div>
Like this:
#media all and (max-width: 480px) {
div{
float: left;
width: 98%;
margin-left: 1%;
overflow: hidden;
border: 1px solid #000;
box-sizing: border-box;
padding: 5px;
}
}
Or with class
.wrapper div{
...
}
More about #media
https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries
I want to position two blocks in parent block - one in the top, another in the bottom. Parents are follow each other as in catalog for example. To reach my goal I'am using flexible layout
<div class="container">
<div class="item">
<div class="holder">
<div class="content">
First content block<br/>
First content block<br/>
First content block<br/>
</div>
<div class="bottom"></div>
</div>
</div>
<div class="item">
<div class="holder">
<div class="content">
Second content block<br/>
Second content block<br/>
Second content block<br/>
Second content block<br/>
Second content block<br/>
Second content block<br/>
</div>
<div class="bottom"></div>
</div>
</div>
</div>
CSS is (webkit prefixes are deleted from this, presence in jsfiddle)
.container{
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
.item{
width: 50%;
background-color: #fff;
}
.holder{
display: flex;
flex-direction:column;
align-content:space-between;
height: 100%;
}
.content{
flex: 1; // Added
width: 100%;
background-color: #eee;
}
.bottom{
width: 100%;
height: 20px;
background-color: #f00;
}
Code in jsfiddle https://jsfiddle.net/2nowks6p/5/.
There is a problem in layout, because bottom block does not position in bottom.
Can anyone explain to me, why this happen?
As #ketan answear add flex: 1 to .content solve problem in Firefox but not in Chrome and Opera.
I updated your demo to make it work on chrome & Firefox.
I added a display: flex; on .item and flex: 1; on .holder
https://jsfiddle.net/2nowks6p/8/
Just give flex:1; to .content will make bottom div to position bottom.
.content{
width: 100%;
background-color: #eee;
flex:1;
}
Updated Fiddle
In the fiddle below the first 2 items display next to each other in a row, but as there's only 3 items the 3rd displays with 100%.
I would like this to keep the same width as the other 2 items leaving a blank space where there is no item.
I have also set the width of these items to 40% and it is displays as 50% each with a 10px margin which is fine but I was under the impression you needed flex: 1 auto; to set the width in this way. however doing that would mean all boxes would display with 100% when pulling from a DB.
https://jsfiddle.net/ffr9rhrw/
html
<div class="container">
<div class="main">
<div class="rev-col">
<div class="reviews-main-wrap">
<div class="reviews-main-img"><img class="u-full-width" src="../../images/reviews/{{ $review->img }}" ></div>
<div class="reviews-main-header"><h6>{!! $review->header !!}</h6></div>
<div class="reviews-main-price">Price £££</div>
<div class="reviews-main-content">{!! str_limit($review->content, $limit = 100) !!}</div>
<div class="reviews-readmore">Read More</div></a>
</div>
</div>
<div class="rev-col">
<div class="reviews-main-wrap">
<div class="reviews-main-img"><img class="u-full-width" src="../../images/reviews/{{ $review->img }}" ></div>
<div class="reviews-main-header"><h6>{!! $review->header !!}</h6></div>
<div class="reviews-main-price">Price £££</div>
<div class="reviews-main-content">{!! str_limit($review->content, $limit = 100) !!}</div>
<div class="reviews-readmore">Read More</div></a>
</div>
</div>
<div class="rev-col">
<div class="reviews-main-wrap">
<div class="reviews-main-img"><img class="u-full-width" src="../../images/reviews/{{ $review->img }}" ></div>
<div class="reviews-main-header"><h6>{!! $review->header !!}</h6></div>
<div class="reviews-main-price">Price £££</div>
<div class="reviews-main-content">{!! str_limit($review->content, $limit = 100) !!}</div>
<div class="reviews-readmore">Read More</div></a>
</div>
</div>
</div>
<!-- sidebar content -->
<div class="sidebar">
#yield('sidebar')
</div>
</div>
css
.container { display:flex; flex-flow: row wrap; max-width:1200px; margin:0 auto; padding: 0 10px;}
.header { flex: 1 100%; height:50px; background-color:#ff00ff;}
.main {display:flex; flex-flow: row wrap; flex:1; background-color:; }
.sidebar { flex: 0 250px; margin-left:10px;background-color:#ec2350; }
.center { -webkit-justify-content: center; justify-content: center; }
.rev-wrap{ display:flex; flex-flow: row wrap; background-color:#ececec;}
.rev-col:first-child{flex:1 40%; margin-left:0px; background-color:#ff00ff;}
.rev-col{flex:1 40%; margin-left:10px; background-color:#ff00ff;}
.rev-column:nth-child(odd){ flex:1 40%; margin-left:0px; background-color:#ff00ff;}
.rev-header{flex:1 auto; height:auto; padding:10px;background-color:#ff0000;}
.reviewscontainer { width: 100%; height:auto; margin: 0 auto; background-color:#f9f9f9; color:#2c3e50; }
.reviews-main-wrap{border:0px solid #ccc;height:auto; margin-bottom:2%; ov
Regarding '.rev-column:nth-child(odd)' not removing margin. That is because your element has a class name 'rev-col'.
This means the CSS should be
.rev-col:nth-child(odd){ ... }
I don't get what exactly you want to do,
First thing i don't think this style [flex:1 250px] is correct, you should use [flex:1 Auto; max-width:250px] other incorrect styles you'r using are [flex:1 40%], the correct way to go is [flex:1] or [flex:1 1 Auto] or [flex:1 1 0]... so on (You get the picture!).
Now, Since the container is [display:felx] then this div container should be filled with it's contained element.So, one way to go is simply to add another div in order to fill the blank space,Another way to go is to set the container to [display:inline-flex] this will cause the container div to align to the left and set its size according to its content.
Another way which i think will answer your needs the best is just to set max-width for both left columns and their container, this will prevent them from growing more then expected.
.main {display:flex; max-width:600px; flex-flow: row wrap; flex:1; background-color:; }
.rev-col:first-child{flex:1; max-width:300px; margin-left:0px; background-
color:#ff00ff;}
.rev-col{flex:1; max-width:300px; margin-left:10px; background-color:#ff00ff;}
.rev-col:nth-child(odd){ flex:1; max-width:300px; margin-left:0px; background-color:#ff00ff;}
https://jsfiddle.net/wtesnrp7/
I am new to bootstrap and trying.
I need a pattern as follows
How ca we split the div's vertically with two equal divs ?
In horizondal we can do that by col-md-6.
Thanks in advance
Bootstrap mainly focuses on WIDTH, thus to my knowledge there are
no special classes to make two div's of equal height.
You can do it by specifying height:/* value in px */; in the <div>'s styling !
<div class="container"> /*Grid Layout*/
<div class="row testdiv">/*row cuts of 15px margin of left&right*/
</div>
<div class="row testdiv">
</div>
</div>
Now the CSS :
.testdiv{
height:400px;/*or some other value*/
}
A class selector is used to affect the styling of both div's at the same time !
add two div as follows
<div class="container-fluid mainbg">
<div class="row">
<div class="col-md-12 div1">.col-md-12</div>
</div>
<div class="row">
<div class="col-md-12 div2">.col-md-12</div>
</div>
</div>
Some css code to include
.mainbg{
background:grey;
padding:10px; }
.div1{
background:red; }
.div1, .div2{
height:100px;
line-height:100px;
font-size:50px; }
.div2{
text-align:center;
}
You could use css tables to achieve equal-height rows
Bootply
Markup
<div class="container-fluid">
<div class="row">
<div class="one">DIV1</div>
</div>
<div class="row">
<div class="two">DIV2</div>
</div>
</div>
(Relevant) CSS
.container-fluid
{
height: 200px; /* whatever you need */
display:table;
width:100%;
}
.one,.two
{
display:table-cell;
width:100%;
vertical-align: middle;
}
.row {
display:table-row;
}
Depending on your browser support you could always use CSS3 Flexbox
I did a quick demo here of what you're after.
http://codepen.io/tom-maton/pen/LCbIx
.container {
align-content: stretch;
background-color: gray;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
height: 350px;
margin: 20px auto;
padding: 15px;
width: 750px;
}
All the flexbox settings are set on the containing element and it does the rest from there on in.
A good article about FlexBox can be found here http://css-tricks.com/snippets/css/a-guide-to-flexbox/