One of our designers has created a layout where the footer content order changes from desktop to mobile. I'm using bootstrap and would like to do it as simply as possible. I believe the following is the correct markup but it doesn't seem to work for full width columns?
HTML
<div class="container">
<div class="row">
<div class="col-sm-12 col-sm-push-12">
<div class="row">
<div class="col-md-12">
<p>Ooo content</p>
</div>
</div>
</div>
<div class="col-sm-12 col-sm-pull-12">
<div class="row">
<div class="col-md-12">
<p>Ooo more content</p>
</div>
</div>
</div>
</div>
</div>
Example: https://jsfiddle.net/rwydcepc/
The aim of the above is to switch the top column with the bottom column when the sm is applied. This doesn't seem to happen though and everything screws up?
Is there another way to do this using bootstrap or with some simple additional css, ideally I'd like to avoid duplicate content and showing / hiding or relying on Javascript.
There is a similar question here but it doesn't answer the question: Change the order of col-*-12 columns in Bootstrap 3 by using push/pull
There is already a solution using Bootstrap reordering but not for 100% width columns, the below solution uses Flexbox method.
#media (max-width: 768px) {
.reorder .row {
display: flex;
display: -ms-flex;
flex-direction: column;
}
.reorder .row .item1 {
order: 2;
}
.reorder .row .item2 {
order: 1;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container reorder">
<div class="row">
<div class="col-sm-12 item1">
<p>Ooo content</p>
</div>
<div class="col-sm-12 item2">
<p>Ooo more content</p>
</div>
</div>
</div>
Related
I have 3 div in my html. div1, div2,div3. Now in mobile version I want to change the alignment of those div. Please see the below images for better understand.
HTML
<div class="row">
<div class="col-md-12">
Div1
</div>
<div class="col-md-9" style="float:right;">
Div3
</div>
<div class="col-md-3" style="float:left;">
Div2
</div>
</div>
NOTE: I am using bootstrap 3
How to do that?
Anybody help please ?
You need to use Grid: column ordering
According to the mobile-first concept you need to define default view for mobile first in the right order.
section 1
section 3
section 2
Then assign col-md-push-3 for section 3 and col-md-pull-9 for section 2 and define its width using col-md- class.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>section 1</div>
</div>
<div class="col-xs-12 col-md-9 col-md-push-3">
<div>section 3</div>
</div>
<div class="col-xs-12 col-md-3 col-md-pull-9">
<div>section 2</div>
</div>
</div>
</div>
I answered something similar to this question before. reordering col-12 are not possible with bootstrap-3 (push/pull). You can use grid together with a media query to do this.
<div class="row reordered">
<div class="col-md-12">
Div1
</div>
<div class="col-md-3">
Div2
</div>
<div class="col-md-9">
Div3
</div>
</div>
css
#media screen and (max-width: 992px) { //col-md breakpoint
.reordered {
display: grid;
}
.reordered.col-md-3 {
order: 2;
}
.reordered.col-md-9 {
order: 1;
}
}
use col-sm-12 hopefully it will work
try this:
#media only screen and (max-width: 400px) {
.row {
display: grid !important;
grid-template-columns: auto !important;
}
}
basically what I'm trying to achieve using bootstrap is something like this
(https://ibb.co/mBB9P6P). When it's resized to smaller screens it should like
(https://ibb.co/0XnDy2S). Of course with the code I'm using, what happens is that second image goes behind second paragraph
My idea was using Bootstrap's order-first and order-last classes to achieve this and while it works for mobile, on desktop both pictures are on left. What I thought would work was removing a class from a div on different media query but I'm not sure if that's even an option.
<div class="row">
<div class="col-md-3">
<img src="img1.png">
</div>
<div class="col-md-9">
<p>Text</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p>Text</p>
</div>
<div class="col-md-3">
<img src="img1.png">
</div>
</div>
Bootstrap divides the screen up into 12 column grid. If you choose md-3 then you will get four cols max going across. You can specify multiple column formats all in the class attribute. https://getbootstrap.com/docs/4.0/layout/grid/ Hope this helps.
If you're using Bootstrap 4, then you can take advantage of its flex based layout and use the order property. Here is an example:
#media (max-width: 768px) {
.col-md-9 {
order: 2;
}
.col-md-3 {
order: 1;
}
}
img {
width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-md-3">
<img src="https://placehold.it/250x150">
</div>
<div class="col-md-9">
<p>Text</p>
</div>
</div>
<div class="row">
<div class="col-md-9">
<p>Text</p>
</div>
<div class="col-md-3">
<img src="https://placehold.it/250x150">
</div>
</div>
Here is a fiddle to play with: https://jsfiddle.net/2mwxeor5/1/
Drop Bootstrap (it will cause more issues anyway) and use flexbox. The order property will help you.
Consider the following:
<div class="row">
<div id="side_panel" class="col-md-3 cold-xs-12">
Side panel
</div>
<div id="mainContentRight" class="col-md-9 cold-xs-12 ">
Main content area
</div>
</div>
Is there a way to switch the order of these columns for mobile view so that the main content appears before the side panel?
Bootstrap is a mobile first platform so change your mark up to how you want it to look on the mobile with the full xs-12. You can then use push and pull to move the column. Here is a link to the doc's.
<div class="row">
<div id="mainContentRight" class="col-md-9 col-md-push-3 cold-xs-12 ">
Main content area
</div>
<div id="side_panel" class="col-md-3 col-md-pull-9 cold-xs-12">
Side panel
</div>
</div>
Unfortunately, You can not reorder using push and pull for 12 column classes i.e. col-xs-12. Either change the markup to be able to include the 12 column grid system or use a simple solution using flexbox below:
#media (max-width: 768px) {
.reorder {
display: flex;
flex-direction: column;
}
#side_panel {
order: 2;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row reorder">
<div id="side_panel" class="col-md-3 cold-xs-12">
Side panel
</div>
<div id="mainContentRight" class="col-md-9 cold-xs-12">
Main content area
</div>
</div>
I have a page with two columns. All works great and responsive however, i noticed when i resize to mobile view, the second columns stacks underneath (great!) however the content is right below the content of the first column so looks terrible.
Is there a way to create this spacing? Tried targeting with classes and ID's and playing with margins and paddings but nothing seems to make a difference.
<div class="container">
<div class="row">
<div class="col-sm-5">
<h1>Title</h1>
<p>Little bit of content</p>
</div>
<div class="col-sm-6 col-sm-offset-1">
<h1>Title</h1>
<p>Little bit of content</p>
</div>
</div>
</div>
Is there a way to create this spacing?
Yes there is. It could be achieved by using #media queries to apply some styles to the 2nd, 3rd, ... columns on specific break points. For instance:
/* Extra small devices (phones, less than 768px) */
#media (max-width: 767px) {
[class*="col-"] + [class*="col-"] {
padding-top: 1em; /* for instance */
}
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-5">
<h1>Title</h1>
<p>Little bit of content</p>
</div>
<div class="col-sm-6 col-sm-offset-1">
<h1>Title</h1>
<p>Little bit of content</p>
</div>
</div>
</div>
I would like to know how easilly achieve this layout with Bootstrap 3.
You can achieve that layout using bootstrap 3 pretty easy, you just have to arrange your columns in a proper order. The orange~red block I believe its a sidebar, and the other two blocks have the same width (seems bound to the same container), and I think there you have your content.
So, put the sidebar block, in a container with the desired width from the bootstrap grid, like col-md-4, and the content block in a container say col-md-8; add to both these containers col-xs-12 class(will add 100% width on 768px and bellow), we'll need it because we're gonna use pull-left/right(float rule) class to swap them around.
Check out the demo and bellow the markup/css used
The markup:
<div class="container">
<div class='row cf'>
<div class='col-sm-4 col-xs-12 pull-right'>
<div class='orange'>One good lookin sidebar</div>
</div>
<div class='col-sm-8 col-xs-12 pull-left'>
<div class='content-entry orchid'>
Some content here
</div>
<div class='content-entry cyan'>
And some other content here
</div>
</div>
</div>
</div>
And the css:
.orange{
background: orange;
}
.orchid{
background: orchid;
}
.cyan{
background: cyan;
}
**Note: if you want that sidebar to expand it's height to the height of the other 2 blocks combined, that's a different story, but this should get you started.
UPDATE 2
OK since you have a layout a bit tricky on mobile, I guess your safest bet would be to make the sidebar absolute positioned, and on mobile(bellow and 767px), switch it to static position, to make em fall into a natural flow. There are some more other methods out there like flexbox, or maybe some fancy table tricks, but this one should get you going.
Check out the demo, and the changed markup/css bellow:
<div class="container">
<div class='row content-wrapper'>
<div class='col-sm-8 col-xs-12'>
<div class='content-entry orchid'>
Some content here
</div>
</div>
<div class='col-sm-4 col-xs-12 sidebar-wrapper'>
<div class='orange'>One good lookin sidebar</div>
</div>
<div class='col-sm-8 col-xs-12'>
<div class='content-entry cyan'>
And some other content here
</div>
</div>
</div>
</div>
.orange{
background: orange;
}
.orchid{
background: orchid;
}
.cyan{
background: cyan;
}
/*added rules*/
.content-wrapper{
position: relative;
}
.sidebar-wrapper{
position: absolute;
top: 0; right: 0;
}
#media all and (max-width: 767px){
.sidebar-wrapper{
position: static;
}
}
Have a look here, I think the .col-md-8 and .col-md-4 classes will be interesting for you.
Since stack Overflow will not do any project i posted you simple and easy step
Bootstrap use media-queries
example
#media screen and (max-width: 500px) {
div {
width: 80%
}
}
this above query works if screen is bellow 500px div width will be 80%
try this example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
#media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browserwindow. When the width of this document is less than 300 pixels, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>
Above example will show when screen size is bellow 600px page color will change from lightgreen to lightblue
<body class="container">
<div class="row">
<div class="col-sm-6 col-xs-12">orange</div>
<div class="col-sm-6 col-xs-12">
<div class="row">violet row</div>
<div class="row">light blue</div>
</div>
</div>
</body>
I used xs-12 for the mobile. Please post your example code next time.
Thank you for all your answers.
Here's what i've made with the help of all answers :
<div class="container">
<div class="row">
<div class="col-sm-8 bg-info">
<h4>Content 1</h4>
</div>
<div class="col-sm-4 bg-warning pull-right">
<h4>Sidebar</h4>
</div>
<div class="col-sm-8 bg-success pull-left">
<h4>Content 2</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
<div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
<div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12 col-md-8" style="background-color:purple; color:#fff">Contents box 1</div>
<div class="col-xs-12 col-md-4" style="background-color:red; color:#fff">Sidebar</div>
<div class="col-xs-12 col-md-8" style="background-color:blue; color:#fff">Contents box 2</div>
</div>