<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12 order-2">1
</div>
<div class="col-lg-4 col-md-12 order-1">2
</div>
</div>
</div>
I have 2 columns which I want to order in different ways on desktop and mobile. Order-1 works fine on mobile. But it works on desktop too. Help me to change order only for mobile view in Bootstrap 4.
Bootstrap is mobile first. You will need to add a different class for larger displays.
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12 order-2 order-sm-1">1
</div>
<div class="col-lg-4 col-md-12 order-1 order-sm-2">2
</div>
</div>
</div>
Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .order-sm-* applies to small, medium, large, and extra large devices, but not the first xs breakpoint).
Note that you have the classes order-2 and order-1. These classes are the same as order-xs-*.
So, if you want special rules only for large displays (lg and xl), just add the classes:
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12 order-2 order-lg-1">1
</div>
<div class="col-lg-4 col-md-12 order-1 order-lg-2">2
</div>
</div>
</div>
You only need to do this...
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12 order-md-2">1
</div>
<div class="col-lg-4 col-md-12 order-1">2
</div>
</div>
</div>
https://www.codeply.com/go/1niA4HHVoV
Related
I have this code:
<div class="row">
<div class="col-lg-3">
<div class="ava-block">
</div>
</div>
<div class="col-lg-6">
...
</div>
<div class="col-lg-3">
....
</div>
</div>
How I can hide first col-lg-3 on mobile and update col-lg-6 to col-lg-9?
I don't need show col-lg-3 on mobile devices. But if I hide on css with media then col-lg-6 is not resize to full width.
It sounds like you want something like this. Use the display utils to show/hide the column. Use col for the col-lg-6 so that it always fills the remaining width.
<div class="container-fluid">
<div class="row">
<div class="col-3 d-none d-lg-block">
<div class="ava-block border">
3
</div>
</div>
<div class="col">
<div class="ava-block border">
6-9
</div>
</div>
<div class="col-3">
<div class="ava-block border">
3
</div>
</div>
</div>
</div>
Demo: https://www.codeply.com/go/gyuRoUt68s
To hide a div on mobile you have to use the css class .d-none .d-sm-block and to make a div only big on mobile you have to use .col-xs-9
So:
<div class="row">
<div class="d-none d-sm-block col-lg-3">
<div class="ava-block">
</div>
</div>
<div class="col-xs-9 col-lg-6">
...
</div>
<div class="col-lg-3">
....
</div>
</div>
Check Bootstrap's documentation on display
I want to have 2 divs besides each other for col-md and higher, while having them above each other for col-sm and lower. So I tried to use the push and pull feature as mentioned in the docs but somehow it's not working. What I'm trying to do is get the RIGHT div above the LEFT div on col-sm and lower, basically reversing the order.
What am I doing wrong?
<div class="container">
<div class="row">
<div class="col-sm-12 col-sm-push-12 col-md-7">LEFT</div>
<div class="col-sm-12 col-sm-pull-12 col-md-5">RIGHT</div>
</div>
</div>
Here's a fiddle: https://jsfiddle.net/ko7euh77/1/
You just need to think "mobile-first"..
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-push-7 col-md-5">RIGHT</div>
<div class="col-sm-12 col-md-pull-5 col-md-7">LEFT</div>
</div>
</div>
Demo: http://www.codeply.com/go/2SN4r7KGwV
Bootstrap 4 Update
The push pull class are now order-* (using flexbox) in Bootstrap 4.
https://www.codeply.com/go/l3BOOH6JM9
<div class="row">
<div class="col-md-5 order-md-2">
<div class="card card-body">RIGHT</div>
</div>
<div class="col-md-7 order-md-1">
<div class="card card-body">LEFT</div>
</div>
</div>
It totally depends on the version you are using, for bootstrap 4 and above you can push and pull like this:
one more thing here order doesn't mean to the grid of the scree it will be the no.
<div class="row">
<div class="col-sm-2 order-md-2 order-sm-1" >
<div >RIGHT</div>
</div>
<div class="col-sm-10 order-md-1 order-sm-2 ">
<div >LEFT</div>
</div>
</div>
Here are the bootstrap docs for further reading
I am currently working on building a website. I have designed a basic pricing chart for the site (using bootstrap) The problem I am having, is when I resize my window, the design gets mis-aligned.
Here is the code for the current design so far
<div class="background-pricing container-fluid">
<div class="container">
<div class="row">
<div class="payment-method">We accept: Cash and Checks with payment due on Fridays of each week.</div>
</div>
<!--infants and children -->
<div class="row">
<div class="infants-box col-sm-6 col-md-6 col-lg-6">
<div class="infants">Infants</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="children">Children 2+</div>
</div>
</div>
<div class="row">
<div class="full-time col-sm-6 col-md-6 col-lg-2">Full Time</div>
<div class="prices-left-box col-sm-5 col-md-3 col-lg-5">
<div class="prices-left">$200 Per Week</div>
</div>
<div class="prices-right-box col-sm-5 col-md-3 col-lg-5">
<div class="prices-right">$150 Per Week</div>
</div>
</div>
<div class="row">
<div class="full-time col-sm-2 col-md-2 col-lg-2">Up to 4 Hours</div>
<div class="prices-left-box col-sm-5 col-md-5 col-lg-5">
<div class="prices-left">$125 Per Week</div>
</div>
<div class="prices-right-box col-sm-5 col-md-5 col-lg-5">
<div class="prices-right">$100 Per Week</div>
</div>
</div>
</div>
</div>
As you can see, in full screen, the chart is legible, but when resized, the chart is unreadable with the "infants" and "children 2+" side by side.
How would I make it easier to read?
You cannot change the order of columns in smaller screens but you can do that in large screens.
So change the order of your columns.
<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>
<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>
By default this displays the main content first.
So in mobile main content is displayed first.
By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.
Working fiddle here.
I need to realize a pretty weird layout and i'm actually using bootstrap.
I have 3 boxes: A, B and C where A.height = B.height + C.height.
On mobile, they should render in the following order:
|B|
|A|
|C|
While on desktop i need the following layout:
|A||B|
| ||C|
(Basically A is the left column while B and C are on the right)
I can't figure out how C should be positioned.
Actually i have this code, it is perfect on mobile but on desktop produces the following layout:
|A||B|
| |
|C|
Code:
<div class="container">
<div class="col-sm-12 col-md-6 col-md-push-6">B</div>
<div class="col-sm-12 col-md-6 col-md-push-6">A</div>
<div class="col-sm-12 col-md-6">C</div>
</div>
Otherwise, putting B and C in the same box works great in desktop but produces
|B|
|C|
|A|
on mobile.
Do you have any suggestion?
Following structure will fix your problem:
<div class="container">
<div class="col-xs-12 col-md-6 pull-right">B</div>
<div class="col-xs-12 col-md-6">A</div>
<div class="col-xs-12 col-md-6 pull-right">C</div>
</div>
.box-B,
.box-C {
background: green;
height: 200px;
}
.box-A {
background: blue;
height: 400px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-12 col-md-6 pull-right box-B">B</div>
<div class="col-xs-12 col-md-6 box-A">A</div>
<div class="col-xs-12 col-md-6 box-C pull-right">C</div>
</div>
Try the C like this:
<div class="container">
<div class="col-sm-12 col-md-6 col-md-push-6">B</div>
<div class="col-sm-12 col-md-6 col-md-push-6">A</div>
<div class="col-sm-12 col-md-6 coll-md-offset-6">C</div>
</div>
OR:
<div class="container">
<div class="col-sm-12 col-md-6 col-md-push-6">B</div>
<div class="col-sm-12 col-md-6 col-md-push-6">A</div>
<div class="col-sm-12 col-md-6 pull-right">C</div>
</div>
To change their view in phones or tablets you can use the implemented classes for it for example:
<div class="col-lg-12 col-xs-6">
<p></p>
</div>
<div class="col-lg-12 col-xs-6">
<p></p>
</div>
Like this in laptops, desktop you will see full width and in phone you will see both divs aligned in one row.
You can allso use col-xs-offset-* to move the div positions but you gotta make shure that you have space.
For Example:
--- THIS IS WRONG --- Because you have only 12 cols and you are setting 2 + 2 offsets so that means you need total of 16 cols.
<div class="col-lg-12 col-xs-6 col-xs-offset-2">
<p></p>
</div>
<div class="col-lg-12 col-xs-6 col-xs-offset-2">
<p></p>
</div>
--- THE RIGHT WAY ---
<div class="col-lg-12 col-xs-4 col-xs-offset-2">
<p></p>
</div>
<div class="col-lg-12 col-xs-4 col-xs-offset-2">
<p></p>
</div>
The classes in bootstrap are:
lg - desktop
md - laptop
sm - small devices (tablets)
xs - extra small devices (phones)
together with them you can use col-**-offset-** or col-**-hidden or col-**- visible
But once again if you are going to use offset make sure you are not going above 12 cols
Hope this will help you!
using rows and pull-right you can get the effect you're looking for:
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-md-push-6 pull-right">B</div>
<div class="col-sm-12 col-md-6 col-md-push-6 pull-right">A</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 pull-right">C</div>
</div>
</div>
that should do the trick.
I have been reading a lot of questions and answers here about swapping, rearranging and replacing divs using bootstrap, but I couldn't solve my problem.
I have two divs that contain more divs in it.
One div(A) is on the right side and another on the left(B).
In desktop and tablet view they are set one next to another AB.
When on mobile view I want A to be under B.
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6">
A
</div>
<div class="col-md-6 col-sm-6">
B
</div>
</div>
</div>
I have tried with pull and push but it didn't work.
Any help will be appreciated. Thanks
Here is one solution that did the trick for me:
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-lg-6 col-push-6">
Content B
</div>
<div class="col-md-6 col-sm-6 col-lg-6 col-pull-6">
Content A
</div>
</div>
</div>
SEE WORKING EXAMPLE HERE
Read more on Bootstrap ordering here
You can use a trick by visible class:
<div class="row">
<div class="col-md-6 col-sm-6 visible-lg visible-md">
A (Visible-lg & md)
</div>
<div class="col-md-6 col-sm-6">
B
</div>
<div class="col-md-6 col-sm-6 visible-sm visible-xs">
A (Visible-sm & xs)
</div>
</div>