I have been reading a lot of documentation but I cannot succeed re-arranging some divs order. This is my code
<div class="container">
<div class="row">
<div class="col-md-11">
<div class="slider">
The slider
</div>
</div>
<div class="col-md-5">
<nav class="main-menu">
The Menu
</nav>
</div>
</div>
</div>
I want the menu to be over the slider (both with 16 column size) when screen enters sm. Is it possible?
Use flexbox:
.row {
display: flex;
flex-direction: column;
}
#media (max-width: 500px) {
.row > div:first-child {
order: 2;
}
}
http://codepen.io/antibland/pen/aNRZRJ
Related
How can I go about splitting the screen like in the screenshot? The website in the screenshot is mine and I've designed it in Elementor but now I want to code it. How can I do that with css and maybe Boostrap?
Visit mateusrdesign.com to check it for yourself.
Screenshot
Screenshot #02 (notice how the screen is smaller and there is no horizontal scroll bar
Here's what I've tried:
<div class="container">
<div class="row">
<div id="left" class="col-3">
<p>Place holder</p>
</div>
<div id="right" class="col-9">
<p>Place holder</p>
</div>
</div>
</div>
You can achieve this with a flex box:
.row {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.row #left {
background: yellow; /** Just to emphasize vertical split visually. You can remove this */
width: 50%;
}
.row #right {
background: green; /** Just to emphasize vertical split visually. You can remove this */
flex: 1;
}
<body style="height: 100vh;">
<div class="row w-100 h-100">
<div class="col bg-info">Left side</div>
<div class="col bg-dark">Right side</div>
</div>
</body>
This is one of the bootstrap way. Dont forget to import bootstrap cdn to html.
As you can see in the attached image, in desktop version I have 8 divs in 2 rows and 4 columns, but in mobile version I need to have only 6 of those divs (not showing 2 of them) organized in 3 rows and 2 columns. Please take a look at the picture so you can understand the order I need.
Any ideas on how can I achieve this?
Thanks :)
I'm answering my question because I found a way to do what I wanted. And this is it:
.container {
display: flex;
flex-flow: wrap;
width: 100%;
}
.item {
width: 25%;
text-align: center;
}
#media screen and (max-width: 700px) {
.item {
width: 50%;
}
.item-invisible {
display: none;
}
}
.item-content {
background-color: #999;
margin: 5px;
}
<div class="container">
<div class="item">
<div class="item-content">1</div>
</div>
<div class="item">
<div class="item-content">2</div>
</div>
<div class="item">
<div class="item-content">3</div>
</div>
<div class="item item-invisible">
<div class="item-content">4</div>
</div>
<div class="item">
<div class="item-content">5</div>
</div>
<div class="item">
<div class="item-content">6</div>
</div>
<div class="item">
<div class="item-content">7</div>
</div>
<div class="item item-invisible">
<div class="item-content">8</div>
</div>
</div>
Thanks anyway :)
I'm using Bootstrap 3.3.7 and flexbox. I've got flexbox working on a 3 column (3 .col-md-3 inside a .container-fluid) working.
But I want to collapse the columns (each .col-md-3) into single columns on mobile.
How can I do this? My markup is as follows:
<div class="container-fluid">
<div class="row flex text-center">
<div class="col-md-3 software-box-outer">
<h1>
Testing 1
</h1>
</div>
<div class="col-md-3 software-box-outer">
<h1>
Testing 2
</h1>
</div>
<div class="col-md-3 software-box-outer">
<h1>
Testing 3
</h1>
</div>
</div>
</div>
CSS:
.flex {
display: flex;
justify-content: space-between;
}
.row.flex:before,
.row.flex:after {
display: none;
}
.software-box-outer {
height: 200px;
border: 3px solid grey;
}
Fiddle is here: https://jsfiddle.net/xpufcsuk/
I tried adding .col-xs-12 to each .col-md-3 hoping this would make it go into full single columns (occupy all 12 cols) on mobile. But it doesn't.
You can use #media queries to make your website responsive.
#media (max-width: 760px) {
.flex {
flex-direction:column; //change the flex direction from row to column
}
}
Basically, when the screen-size is lower than 760px, you change direction to column
Example: ( lower resolution to 760px )
https://jsfiddle.net/972bdkvr/1/
If you want flexbox to work on only large deceives, you can use media queries.
Write you code into #media screen and (min-width:767px), so it will work only when device width > 767px
#media screen and (min-width:767px) {
.flex {
display: flex;
justify-content: space-between;
}
.row.flex:before,
.row.flex:after {
display: none;
}
}
.software-box-outer {
height: 200px;
border: 3px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row flex text-center">
<div class="col-md-3 software-box-outer">
<h1>
Testing 1
</h1>
</div>
<div class="col-md-3 software-box-outer">
<h1>
Testing 2
</h1>
</div>
<div class="col-md-3 software-box-outer">
<h1>
Testing 3
</h1>
</div>
</div>
</div>
I am new to responsive design.
I have 4 floating left divs. but what I want to do is reverse the divs so that will look more responsive.
So the page currently displays
FirstSecondThirdFourth
What I want is:
FourthThirdSecondFirst
Fiddle
#block-1,
#block-2,
#block-3 {
float: left;
}
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
<div id="block-4">Fourth</div>
</div>
you can use flex-direction: row-reverse and justify-content:flex-end (this is optional given what you want to do)
#example {
display: flex;
flex-direction: row-reverse;
justify-content:flex-end
}
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
<div id="block-4">Fourth</div>
</div>
im trying to use bootstrap for a site, but what i am trying to achieve to have to columns within a row col-sm-6. Where i want one column to be in an ordinary container and the other to have container fluid effect.
So it would one column as normal and the other column as full width. So far this has been difficult to do:
<div class="container">
<div class="row">
<div class="col-sm-6 first">
</div>
<div class="col-sm-6 second">
</div>
</div>
</div>
http://jsfiddle.net/8fyjtn09/
i think i figured it out, instead of using a normal container i would have to use container fluid as i said before but just an offset
<div class="container-fluid">
<div class="row">
<div class="col-sm-offset-2 col-xs-4 first">
</div>
<div class="col-sm-6 second">
</div>
</div>
</div>
Do you know flex-box layout in CSS ?
As i understand your question, i believe that on wider screens you want to have first column fixed and second column should be responsive. And for a smaller screen you want the default bootstrap behaviour. If this is what you are looking for, i have created a simple fiddle. Please check that and let me know if this is helpful.
Here is the link : https://jsfiddle.net/YameenYasin/7zaxx06z/23/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
<div class="row flexbox">
<div class="first">
</div>
<div class="second">
</div>
</div>
</div>
.flexbox {
display: -webkit-flex;
-webkit-flex-flow: row; // Children elements will be in rows
-webkit-flex-wrap: wrap;
width: 100%;
}
.first
{
border:1px solid red;
height:50px;
width:200px;
}
.second{
border:1px solid green;
width:100%;
-webkit-flex: 1;
height:50px;
}
#media (max-width: 767px) {
.flexbox {
-webkit-flex-flow: column;
}
.first,.second{
width:100%;
}
}