I've got a two column page:
<div class="col-md-5">
...
</div>
<div class="col-md-7">
...
</div>
On desktop and tablet screens, the first div appears to the left of the second div, as we would expect. On smaller screens, the first div appears on-top of the second div, again, as we would expect. What I'm wondering is.... Is it possible, on smaller screens, to flip the order of these two so that the second div appears on top of the first?
Sure! This is built into Bootstrap version 3, with classes like col-[size]-push-[cols], as in the column ordering section of Bootstrap's documentation
Demonstration in this fiddle, using the below code based on Bootstrap's example.
<div class="container-fluid">
<div class="row">
<div class="col-sm-9 col-sm-push-3">First on mobile, second on desktop</div>
<div class="col-sm-3 col-sm-pull-9">Second on mobile, first on desktop</div>
</div>
</div>
Related
If I have a scenario using Bootstrap 5 like...
<div class="container">
<div class="row row-cols-auto">
<div class="col">One</div>
<div class="col">Two</div>
<div class="col">Three</div>
</div>
</div>
All columns currently take whatever width their content needs.
I want column two to be as wide as it can be without interfering with the display of columns one and two.
Is this possible with Bootstrap alone or would I need to rely on additional CSS styling?
Just found the answer. Make all columns EXCEPT the one I want to take up all the space col-auto. Make that one class="col".
<div class="container">
<div class="row">
<div class="col-auto">One</div>
<div class="col">Two</div>
<div class="col-auto">Three</div>
</div>
</div>
Am I losing my mind, because I'm absolutely sure this code should work... but it doesn't.
I'm trying to order my elements according to screen size ie. if small screen or less, menu element is first - and if medium screen or more - menu element is second.
<div class="col-md-9 order-sm-2 order-md-1">
Main content
</div>
<div class="col-md-3 order-sm-1 order-md-2">
Menu column
</div>
What I'm getting for both small and medium screen size is: Main content (1st) and Menu column (2nd).
Can anyone help?
I suspect your problem is either that order-sm-2 and order-sm-1 should define the xs instead of sm versions,
or that the shown code isn't surrounded by the same row & container DIVs
I'm such a div (no pun intended):
<div class="col-md-9 order-2 order-md-1">
Main content
</div>
<div class="col-md-3 order-1 order-md-2">
Menu column
</div>
Needed to have a base order before introducing a breakpoint.
I have a row divided into 3 columns using col-sm-4. Now i expect this row to be divided horizontally into three parts. But it's divided vertically.
See on Jsfillde
Here's my code
<div class="container">
<div class="row" style="padding:13px 15px;">
<div class="pull-left span4">
<img src="themes/custom/img/logo.png" width="120" alt="logo"/>
</div>
<div class="pull-right span4">
<div class="row">
<div class="col-sm-4">One</div>
<div class="col-sm-4">Two</div>
<div class="col-sm-4">Three</div>
</div>
</div>
</div>
</div>
I have kept a logo on the left side and on the right side there is a row that i want to divide horizontally in 3 parts.
What am i doing wrong?
Your code works just fine. The .col-sm-* classes are applied for width 768px and above. If you want make this three divs always horizontally, you have to use classes .col-xs-4 in your case. Updated jsfiddle
Futher reading - http://getbootstrap.com/css/#grid-options
I was having the same problem and was at my wits end. Then I refreshed the browser and it worked.
I have two columns in a row.
<div class="row">
<div class="col-lg-2">
I want this column in bottom side on mobile.
</div>
<div class="col-lg-8">
I want this column in top side on mobile.
</div>
</div>
When I visualize this on my laptop, they are in left and right side respectively. When I watch the page on my mobile phone I see first column on top of the web page.
I want to change the order, first column left side on laptop and bottom side on mobile phone instance of first column that is left side on laptop and top side on mobile phone.
I want to keep the laptop aspect, only change mobile phone view.
Check out the documentation of Bootstrap 3's grid system:
http://getbootstrap.com/css/#grid
By adding the *-lg classes you have only specified how your page should behave on a large screen.
You probably want to add the *-xs classes for defining the columns in the smartphone widths. You can keep the *-lg classes just as they are now.
Furthermore, for changing the order of columns in different widths, bootstrap provides *-push and *-pull classes, see here: http://getbootstrap.com/css/#grid-column-ordering
add class to the larger div .pull-left, and smaller div .pull-right
<div class="row">
<div class="col-lg-2 pull-right">
I want this column in bottom side on mobile.
</div>
<div class="col-lg-8 pull-left">
I want this column in top side on mobile.
</div>
</div>
This will float the second larger div to the left, and thus in the mobile view, where .col-lg-8 is not applicable, will bring it on top
Edit: As this answer creates a gap between two divs, because there are only 10 columns utilized
You will need to change your html see this http://jsfiddle.net/53u69ama/1/
<div class="row">
<div class="col-sm-8 col-xs-12 ">
I want this column in top side on mobile.
</div>
<div class="col-sm-2 col-xs-12 ">
I want this column in bottom side on mobile.
</div>
</div>
Edit 2: you can also change the top position using position style, but this will require you to set the static top for one div. Or you may change it using javascript dynamically.
see this http://jsfiddle.net/53u69ama/2/
Solution:
<div class="row">
<div class="col-lg-8 col-lg-push-2">
I want this column in top side on mobile.
</div>
<div class="col-lg-2 col-lg-pull-8">
I want this column in bottom side on mobile.
</div>
</div>
Use this
<div class="row">
<!-- this is visible if view is all less lg (on top) -->
<div class="device-xs visible-xs device-sm visible-sm device-md visible-md">
<div>
Content to view 2.
</div>
</div>
<div class="col-lg-2">
Content to view 1
</div>
<!-- this is visible when view is lg (in right) -->
<div class="col-lg-8 device-lg visible-lg">
Content to view 2.
</div>
</div>
Note that you will have to copy "Content to view 2." twice.
I'll just show you a jsfiddle I've created to illustrate what I'm trying to achieve:
http://jsfiddle.net/vraG7/3/embedded/result/
Here's the code for that part:
<div class="row">
<div class="twelve columns">
<h2 class="first_column category_title">Nome Categoria</h2>
<div class="row">
<div class="nine columns thumbnail"><img
src="http://www.placehold.it/125x125" alt=""></div>
<div class="three columns date"><time
datetime="2013-02-28" >28<br>02<br>2013</time></div>
</div>
<div class="row">
<div class="twelve columns">
<h2 class="post-title">Titolto del post</h2>
</div>
</div>
</div>
</div>
</div> <!-- category-column -->
What I'm trying to do is to have the 125x125 image and the date box to its right to be the same width as the orange box with "Nome categoria". I thought I did everything right, but apparently I'm missing something.
It is hard to say what exactly the problem is. You are overriding a lot of foundation styles. height, margin, etc. on a bunch of divs.
1) You are applying the background color that you hope to align to to an <h2>. I suggest applying it to the containing <div>. the h2 will never to do the edge of the div, therefore you will not be able to align them.
2) for the date you applying the color to the background. it is possible they are already aligned. if you change the above.
3) for troubleshooting nested grids, it is easy to add the panel class to all of them, this will increase the spacing but let you see the relationship of each nested grid to each other.
this is on foundation 4, but might be useful:
http://foundation.zurb.com/grid-example2.php