I have a section that reads left to right in bootstrap step up. What I am trying to do is get the right section to appear ontop of the left one in mobile view. I attempted using the push/pull methods but they seem to just push my content off the page.
Here is what I have
<div class="row process-page wow animated fadeInRightBig animation-delay-2"><!-- Create row col-6 -->
<div class="col-xs-push-12 col-md-6 col-sm-6">
<h3 class="title margin-b-30">Title</h3>
<p>Content</p>
</div> <!-- end col-6 -->
<div class="col-xs-pull-12 col-md-6 col-sm-6 clipB" >
<h3 class="title margin-b-30 margin-l-30"></h3>
</div>
</div> <!-- end Row -->
So it looks fine in large/medium, however mobile I cannot seem to get them to switch places (top to bottom)
Here is what I Mean
Desktop :
[A][B]
to mobile
[B]
[A]
I thought the push/pull would do the trick if i pushed the top one 12 and pulled the bottom one 12, but all it does it push them both off the screen.
You are using push and pull in the wrong way, you need to use that for the sm view. Try this:
First change the order in HTML and then use right the push and pull
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6">
<p>B</p>
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6" >
<p>A</p>
</div>
</div>
Check this Demo
Just push-12 means offsetting by that amount. Use pull-left and pull-right instead.
Related
guys. I have a little problem here working with bootstrap. I am trying to make a div container with a row containing 3 columns equally proportioned in width :
<div class="row">
<div class="col-md-4" style="background:red;">logo</div>
<div class="col-md-4" style="background:blue;">content</div>
<div class="col-md-4" style="background:yellow;">content+imgs</div>
</div>
</div>
The problem I have is that I want the column with 'logo' to be the second one (after 'content') on xs/sm devices or at resizing the browser window. I tried with push and pull, but I want the columns to be one above each other, not inline, as at the md devices. I have no clue how to do that, any help? :)
Using order classes with bootstrap, you can change the order of the columns responsively.
This example will put the second column first on XS and SM screens.
<!--bootstrap 4-->
<div class="row">
<div class="col-md-4 order-2 order-md-1">first</div>
<div class="col-md-4 order-1 order-md-2">second</div>
<div class="col-md-4 order-3 order-md-3">third</div>
</div>
edit:
For bootstrap 3 (3.3.7) you will need to use push & pull classes. In your case, you would have to make the logo the second column. Mobile counts as the starting point in bootstrap development.
<!-- bootstrap 3 -->
<div class="row">
<div class="col-md-4 col-md-push-4" style="background-color:red;">content</div>
<div class="col-md-4 col-md-pull-4" style="background-color:blue;">logo</div>
<div class="col-md-4" style="background-color:yellow;">content+imgs</div>
</div>
I have the following code in my HTML page. The links work fine when the browser window is maximized however, when I test the same on a mobile browser, the links become unclickable.
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-5">
<label>Legal</label><br>
Terms of Use<br>
Privacy Policy<br>
FAQs<br>
</div>
If I remove the bootstrap column classes from the DIV, the links again become clickable even on xs-screen. So I am sure that this is some issue with BS. Are there any workarounds for this?
Your disclaimer CSS is mixed in with the other two columns in the same row and overlapping the links.
(see how much room your disclaimer takes here: http://jsfiddle.net/93b1x26a/2/)
You need to add your disclaimer into a separate row. Something along the lines of: (now, I do not know how you want the disclaimer bit to behave, so I just gave you this code as a sample working alternative) -
See updated fiddle:
<div class="myfooter" id="footer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-5">
<label>Legal</label>
<!-- contents of first col -->
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-7">
<label>More</label>
<!-- contents of second col -->
</div>
</div>
<!-- separate row for disclaimer -->
<div class="row">
<div class="col-md-8" id="disclaimer">
<label>Disclaimer</label>
<br>
<p>Placeholder text</br>
<p>
</div>
</div>
</div>
</div>
#ochi pointed out the issue . the #disclaimer div is overlapping on others because you gave col-xs=*,col-sm-*,col-md-* to other divs but forgot to give the same to this disclaimer div. so it is over lapping anchor tags.
part of code <div class="col-lg-12 col-md-8 col-sm-6 col-xs-4" id="disclaimer">
Working example
And your HTML is not in good format. syntax for break is <br /> and you didn't close p tag in disclaimer properly.
I have four columns using the Bootstrap column classes
<div class="col-md-3">
#include('schedulizer.classes-panel')
#include('schedulizer.time-span-options-panel')
#include('schedulizer.other-options-panel')
</div>
<div class="col-md-9 col-centered">
#include('schedulizer.schedule-panel')
</div>
They look like this:
In mobile view, the schedule, the main element, is pushed all the way to the bottom like this:
Is there any way to "push" the column to the top when a smaller screen resolution is detected?
Yes. Just rearrange them and use push and pull
<div class="col-md-9 col-centered col-md-push-3">
#include('schedulizer.schedule-panel')
</div>
<div class="col-md-3 col-md-pull-9">
#include('schedulizer.classes-panel')
#include('schedulizer.time-span-options-panel')
#include('schedulizer.other-options-panel')
</div>
demo: http://www.bootply.com/GdWNOo6stu
I have html markup like below,
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
Some contents
</div>
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-12" >
Some Content
</div>
<div class="col-lg-5 col-md-5 col-sm-4 col-xs-12" >
Some Content
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 text-right" >
<div class="company-add-btn">+ Add more companies</div>
</div>
</div>
In large display's it works fine as single row structuring four divs in columns.
But in small displays I like to re-arrange the layout,
First div will get a complete row with full width
Third div will come before 2nd div and take a complete row with center aligned
2nd and 4th div will take a complete row with 2nd row stays at left, and 4th floated right.
Using bootstrap col-md-pull-* or col-md-push-* will just do the reordering inside a row. So that will not work.
One possible solution will be duplicating the markup for each media break points, but Isn't there any better approach then this ?
Can anyone suggest any way ? or point me a good place to start looking for solution ?
I recommend (even though it's dirty) adding your view twice, once in a
<div class="hidden-lg hidden-md hidden-sm">Your content for the XS-grid.</div>
and for the other 'layout
<div class="hidden-xs">Your content for everything but XS-grid.</div>
Hope that helps (looking forward to a better solution ;)).
what you are talking is placing third column before second column and assign it the complete width, bootstrap will not do this.
This can be done only if these columns are to be shown as a single row with pull-let and pull-right. The only option you have is to duplicate the markup in this case, or write down your own css for placing third column before the second one(but this would be not a good idea).
You could hide the second div on small screens; the third div would then be in second position. You would then have to duplicate just the second div after the third and show on small screens only, then do the pull-left and right on the last two divs. Something similar this might work (this example is for small):
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
Some contents 1
</div>
<div class="col-lg-1 col-md-1 hidden-sm col-xs-12" >
Some Content 2
</div>
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12" >
Some Content 3
</div>
<div class="visible-sm col-sm-9 lefty" >
Some Content 2 - duplicate
</div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 righty" >
<div class="company-add-btn">+ Add more companies</div>
</div>
</div>
The use of col-xs-12 is really unnecessary in this case, and in most cases, the column will be 100% below the last col class used.
DEMO: https://jsbin.com/nuhoba
It would be better if you had a graphic to describe what you want. If I followed correctly, then you would order your html in the order it is on a small viewport then -- if the column is in the same .row and the .row is no more than 12 columns, you can push and pull left and right. You have to add up to 12 columns per row at any given column class, I've used col-sm-X for simplicity. If you play around with col-md and/or large that means that you have to use those columns on the others but it need to add to 12 at that min-width.
HTML:
<div class="container">
<div class="row">
<div class="col-sm-3">
A
</div>
<div class="col-sm-4 col-sm-push-2 text-center-xs">
C
</div>
<div class="col-sm-2 col-sm-pull-4">
B
</div>
<div class="col-sm-3 text-right">
<div class="company-add-btn">+ D</div>
</div>
</div>
</div>
CSS
#media (max-width:767px) {
.text-center-xs {text-align:center;}
}
I have a Bootstrap Page like this:
<div class="row">
<div class="col-md-6">
A
</div>
<div class="col-md-6">
B
</div>
</div>
Looks like:
-----
|A|B|
-----
So if I look at it on a mobile Device, the Column A is on top, but I want the B on top.
Is this possible?
I tried it with push an pull, but it didn't work.
Use Column ordering to accomplish this.
col-md-push-6 will "push" the column to the right 6 and col-md-pull-6 will "pull" the column to the left on "md" or greater view-ports. On any smaller view-ports the columns will be in normal order again.
I think what throws people off, is that you have to put B above A in your HTML. There may be a different way to do this where A can go above B in the HTML, but I'm not sure how to do it...
DEMO
<div class="row">
<div class="col-md-6 col-md-push-6">B</div>
<div class="col-md-6 col-md-pull-6">A</div>
</div>
view-port >= md
|A|B|
view-port < md
|B|
|A|
It's worth noting that if you are using columns that are not both equal to 6, then the push amount will not equal the initial column size.
If you have 2 columns (A & B) and wish for column A to be smaller and to the right on "sm" or greater viewports, but atop a mobile (xs) viewport, you would use the following:
<div class="row">
<div class="col-sm-4 col-sm-push-8">A</div>
<div class="col-sm-8 col-sm-pull-4">B</div>
</div>
Otherwise, the alignment of the columns will appear off.
Flexbox Direction
For Bootstrap 4, apply one of the following to your .row div:
.flex-row-reverse
For responsive settings:
.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse
In Bootstrap 4, let's say you want to have one order for large screens and a different order for smaller screens:
<div class="container">
<div class="row">
<div class="col-6 order-1 order-lg-2">
This column will be ordered second on large to extra large screens
</div>
<div class="col-6 order-2 order-lg-1">
This column will be ordered first on large to extra large screens
</div>
</div>
</div>
You can omit order-1 and order-2 above. Just added for clarity. Default order will be the order the columns appear in the html.
For more info https://getbootstrap.com/docs/4.1/layout/grid/#reordering
The below code work for me
.row {
display: flex;
flex-direction: column-reverse;
}
This is now done (in Bootstrap v4) by adding order-# classes.
See https://getbootstrap.com/docs/4.1/migration/#grid-system-1
Like this:
<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>
I have three bootstrap 4 columns of different sizes. As the screen gets smaller the third column is hidden, then when the screen gets smaller still and the divs are stacked the order changes so that column 2 is at the top.
<div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
<h3>LEFT HAND SECTION</h3>
<p>For news, links photos or comments.</p>
</div>
<div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
<h3>MAIN SECTION</h3>
<p>The main content for the page.</p>
</div>
<div class="col-xs-12 col-md-4 d-none d-md-block order-last">
<h3>BLANK SECTION</h3>
<p>Will usually just be blank.</p>
</div>
I hope this helps. I found it difficult to understand this but finally got there with the help of this thread, but it was a bit hit and miss.
I used:
.row {
display: flex;
flex-direction: row-reverse;
}
This worked for me on Bootstrap 4:
<div class="container-fluid">
<div class="row">
<div class="col-md-4 order-md-last">
<%= render 'form'%>
</div>
<div class="col-md-8 order-md-first">
CONTENT
</div>
</div>
</div>
Bootstrap 4 includes classes for flex.
See: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/
<div class="row flex-column-reverse flex-md-row">
<div class="col-sm-10">
Col 1
</div>
<div class="col-sm-2">
Col 2
</div>
</div>
In Bootstrap V4 (Released January 18, 2018) You can use Reordering Classes. Info here under Reordering tab.
https://getbootstrap.com/docs/4.0/layout/grid/