So I have three columns in bootstrap and are the following
Mobile:
[A]
[C]
[B]
Desktop:
[A][C]
[B]
Following is my code:
<div class="container">
<div class="row">
<div class="content1 col-xs-12 col-md-6">
A
<div class="row">
<div class="content2 col-xs-12 col-md-12 hidden-xs hidden-sm">
B
</div>
</div>
</div>
<div class="content3 col-xs-12 col-md-6">
C
</div>
<div class="content2 col-xs-12 col-md-12 hidden-md hidden-lg">
B
</div>
</div>
I have achieved it using hidden classes, but is there a better way to do it using push/pull classes for example?
PS: I have a fixed height for [C], lets say 50vh.
You don't need to use nesting, push/pull or hidden classes. Use 50% width columns on larger md widths.
https://www.codeply.com/go/3APQ7tHCgS
<div class="container">
<div class="row">
<div class="content1 col-md-6">
A
</div>
<div class="content3 col-md-6">
C
</div>
<div class="content2 col-md-12">
B
</div>
</div>
</div>
Also, note that col-xs-12 is implied in Bootstrap 3 when a larger grid column is used so it's not needed in the markup.
Related: How do I change Bootstrap 3 div column order
Try this fiddle...
.content1{height:50vh !important;}
<div class="container">
<div class="content1 col-xs-12 col-md-6">
A
</div>
<div class="content3 col-xs-12 col-md-6">
C
</div>
<div class="content2 col-xs-12 col-md-12">
B
</div>
</div>
I think its working in both sizes (mobile and desktop).
Related
Using CSS, how can I achieve the following layout?
Notice that the order of the elements is different on mobile vs desktop!
Currently, I am using bootstrap 4. The following code "works" for the desktop version, however, does not work for the mobile version.
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="a">
A
</div>
<div class="d">
D
</div>
</div>
<div class="col-md-8">
<div class="b">
B
</div>
<div class="c">
C
</div>
</div>
</div>
</div>
How can I achieve the desired layout? I am considering solutions using:
Bootstrap 4
Flexbox
CSS Grid
The Bootstrap 4 way to get the order you want, and make columns "fit" together is to disable flexbox and use floats for the desktop layout...
"Fit" masonry layout with floats and reordering
<div class="container">
<div class="row no-gutters d-block">
<div class="col-md-4 float-left">
<div class="a">
A
</div>
</div>
<div class="col-md-8 float-left">
<div class="b">
B
</div>
</div>
<div class="col-md-8 float-right">
<div class="c">
C
</div>
</div>
<div class="col-md-4 float-left">
<div class="d">
D
</div>
</div>
</div>
</div>
Demo https://www.codeply.com/go/U4zuuyfHQV
Same heights layout with flexbox and reordering
<div class="row text-white no-gutters">
<div class="col-md-4">
<div class="a">
A
</div>
</div>
<div class="col-md-8">
<div class="b">
B
</div>
</div>
<div class="col-md-4 order-last order-md-0">
<div class="d">
D
</div>
</div>
<div class="col-md-8">
<div class="c">
C
</div>
</div>
</div>
Demo https://www.codeply.com/go/U4zuuyfHQV (option 2)
Related: Bootstrap row with columns of different height
Seeing as you're already using Bootstrap, you can use pushes and pulls to achieve this:
<div class="container">
<div class="row">
<div class="a col-md-4">
A
</div>
<div class="b col-md-8">
B
</div>
<div class="c col-md-8 col-md-push-4">
C
</div>
<div class="d col-md-4 col-md-pull-8">
D
</div>
</div>
</div>
See this example: https://codepen.io/bretteast/pen/VxKyLX
And these docs: https://getbootstrap.com/docs/3.3/css/#grid-column-ordering
There are three columns:
b a c
| | |
in large devices.
I want to show them like:
a
|
b c
| |
on small devices.
My code is:
<div class="col-xs-12 col-sm-4">
b
</div>
<div class="col-xs-12 col-sm-4">
a
</div>
<div class="col-xs-12 col-sm-4">
c
</div>
and my attempt was to change the position of second div that is a and first div with jquery and then leave a unchanged and b to have col-xs-8 col-sm-4 and for c to have col-xs-4 col-sm-4.
Is it an standard way to do this?!
I did it myself:
<div class="hidden-sm hidden-md hidden-lg col-xs-12">
a //so it shows only on small devices
</div>
<div class="col-xs-8 col-sm-4">
b
</div>
<div class="hidden-xs col-sm-4">
a //so it shows only on large devices
</div>
<div class="col-xs-4">
c
</div>
Thanks all even those downvoted :)
Something like this. Please check https://getbootstrap.com/docs/4.0/layout/grid/ it's a really nice documentation.
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12"></div>
<div class="col-sm-6"></div>
<div class="col-sm-6"></div>
</div>
<div class="col-sm-4">
</div>
</div>
I have home page with following code:
<% #events.each_slice(3).to_a.each do |chunk| %>
<div class="row row-centered">
<% chunk.each do |event| %>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 col-centered">
centered content with max-width 300px
</div>
<% end %>
</div>
<% end %>
On big screen it works well. But when I change the size of browser, columns goes from 3 per row to 2 per row and the one left column goes to next row. So I have:
2 columns
1 column
2 columns
1 column
Is there any universal solution for responsive columns generated using #objects.each_slice(3)?
That's because you have the following classes:
col-xs-12 col-sm-6 col-md-6 col-lg-4
That means: 3 per row on a big screen, 2 per row on the middle screens, 1 per row on the mobile.
If you change to:
col-xs-12 col-sm-4 col-md-4 col-lg-4
This will make 3 per row on all the screens except from mobile where will be 1 per row.
So, my solution is pretty simple. On homepage I'll be showing exactly 12 posts. Given that, i changed my code to this:
<div class="row row-centered">
<% #events.each_slice(3).to_a.each do |chunk| %>
<% chunk.each do |event| %>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 col-centered">
<div class="thumbnail">
</div>
</div>
<% end %>
<% end %>
</div>
Given that I'm not generating row with 3 columns, but one row with 12 columns - and I let Bootstrap to deal with.
HTML example showing how Bootstrap responsive grids react to re-sizing
I wrote this HTML snippet to help whenever I want to figure out which combination of Bootstrap classes to use. It might help you too.
<div class="row">
<div class="page-header">
<h1>Bootstrap grid examples</h1>
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
</div>
<h3>Three equal columns</h3>
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
<div class="row">
<div class="col-md-4" style="background-color:red">.col-md-4</div>
<div class="col-md-4" style="background-color:pink">.col-md-4</div>
<div class="col-md-4" style="background-color:yellow">.col-md-4</div>
</div>
<h3>Three unequal columns</h3>
<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
<div class="row">
<div class="col-md-3" style="background-color:red">.col-md-3</div>
<div class="col-md-6" style="background-color:pink">.col-md-6</div>
<div class="col-md-3" style="background-color:yellow">.col-md-3</div>
</div>
<h3>Two columns</h3>
<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
<div class="row">
<div class="col-md-8" style="background-color:pink">.col-md-8</div>
<div class="col-md-4" style="background-color:yellow">.col-md-4</div>
</div>
<h3>Two columns with two nested columns</h3>
<p>Per the documentation, nesting is easy, just put a row of columns within an existing column.</p> <p>This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
<div class="row">
<div class="col-md-8" style="background-color:yellow">
.col-md-8
<div class="row">
<div class="col-md-6" style="background-color:lightgreen">.col-md-6</div>
<div class="col-md-6" style="background-color:pink">.col-md-6</div>
</div>
</div>
<div class="col-md-4" style="background-color:lightgray">.col-md-4</div>
</div>
<h3>Full width, single column</h3>
<p class="text-warning">No grid classes are necessary for full-width elements.</p>
<h3>Mixed: mobile and desktop</h3>
<p>The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
<div class="row">
<div class="col-xs-12 col-md-8" style="background-color:red">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4" style="background-color:lightgray">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4" style="background-color:lightgray">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4" style="background-color:yellow">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4" style="background-color:lightgreen">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6" style="background-color:lightgray">.col-xs-6 </div>
<div class="col-xs-6" style="background-color:lightgreen">.col-xs-6</div>
</div>
<hr>
<h3>Mixed: mobile, tablet, and desktop</h3>
<div class="row">
<div class="col-xs-12 col-sm-6 col-lg-8" style="background-color:lightgray">.col-xs-12 .col-sm-6 .col-lg-8</div>
<div class="col-xs-6 col-lg-4" style="background-color:yellow">.col-xs-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4" style="background-color:lightgreen">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4" style="background-color:pink">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4" style="background-color:lightgray">.col-xs-6 .col-sm-4</div>
</div>
<hr>
<h3>Column clearing</h3>
<div class="row">
<div class="col-xs-6 col-sm-3" style="background-color:lightgray">
.col-xs-6 .col-sm-3
<br>
Resize your viewport or check it out on your phone for an example.
</div>
<div class="col-xs-6 col-sm-3" style="background-color:yellow">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color:lightgreen">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3" style="background-color:pink">.col-xs-6 .col-sm-3</div>
</div>
<hr>
<h3>Offset, push, and pull resets</h3>
<p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
<div class="row">
<div class="col-sm-5 col-md-6" style="background-color:lightgray">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0" style="background-color:yellow">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6" style="background-color:lightgreen">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0" style="background-color:pink"<>.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0" </div>
</div>
</div>
My normal layout is:
|A||C|
|B||C|
There are two columns - left and right.
'A' and 'B' are two rows of left column
'C' is right column.
When I resize, i want it to respond like:
|A|
|C|
|C|
|B|
Code:
<div class="container row">
<div class="col-sm-8">
<div class="row">
a
</div>
<div class="row">
b
</div>
</div>
<div class="col-sm-4">
c
</div>
</div>
I think I have found the solution based on Dan's
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="col-sm-12 col-xs-12" style="background-color: red">a</div>
<div class="col-sm-6 col-xs-12 visible-xs" style="background-color: blue">c</div>
<div class="col-sm-12 col-xs-12" style="background-color: orange">b</div>
</div>
<div class="col-sm-4 hidden-xs">
<div class="col-sm-12 col-xs-12" style="background-color: blue">c</div>
</div>
</div>
</div>
Based on my understanding of your needs this is how you accomplish your reordering using bootstrap the way it was intended:
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-12">a</div>
<div class="col-sm-6 col-xs-12">c</div>
<div class="col-sm-push-6 col-sm-6 col-xs-12">c</div>
<div class="col-sm-pull-6 col-sm-6 col-xs-12">b</div>
</div>
</div>
jsFiddle
Here's a link to the official bootstrap documentation on ordering.
Update based on comments:
Here's a solution using bootstrap exclusively:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="col-sm-12 col-xs-12">a</div>
<div class="col-sm-12 col-xs-12">c</div>
<div class="col-sm-12 col-xs-12 visible-xs">c</div>
<div class="col-sm-6 col-xs-12 visible-xs">b</div>
</div>
<div class="col-sm-6 hidden-xs">
<div class="col-sm-12 col-xs-12">c</div>
<div class="col-sm-12 col-xs-12">b</div>
</div>
</div>
</div>
jsFiddle
.col-*-push-* and .col-*-pull-* are used to reorder columns for differnt screen sizes. So you would use .col-sm-pull-6 on column C2 and .col-sm-push-6 on column B. Simply adjust the amount of columns you need to push / pull to your layout.
Learn more at : getbootstrap.com/css/#grid
could also use float as a solution (if you don't feel like using push/pull)
HTML
<div class="row">
<div class="col-sm-6 col-xs-12 a">
AAA
</div>
<div class="col-sm-6 col-xs-12 c">
CCC
</div>
<div class="col-sm-6 col-xs-12 c">
CCC
</div>
<div class="col-sm-6 col-xs-12 b">
BBB
</div>
</div>
Css
.a,.b,.c{height:60px;}
.a{background:red;}
.b{background:yellow;}
.c{background:blue;float:right;}
#media screen and (max-width:767px){
.c{float:none;}
Here's a jsfiddle jsfiddle
I have these three columns.
In a Medium screen, It should go like: Column A (col-md-6) will be at the top, Column B (col-md-6) beside Column A,and Column C (col-md-12) underneath Column A and B.
Like so:
I'm having a problem with coming up into this kind of ordering.
Here's my current code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content1 col-xs-12 col-md-6">
6-Col-[X-Small] A
</div>
<div class="content3 col-xs-12 col-md-12">
12-Col-[Medium] C
</div>
<div class="content2 col-xs-12 col-md-6">
6-Col-[X-Small] B
</div>
</div>
</div>
</div>
It looks like this at the moment:
I checked out the Bootstrap Docs and used column pushing/pulling.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content1 col-xs-12 col-md-6">
6-Col-[X-Small] A
</div>
<div class="content3 col-xs-12 col-md-12 col-md-push-6">
12-Col-[Medium] C
</div>
<div class="content2 col-xs-12 col-md-6 col-md-pull-12">
6-Col-[X-Small] B
</div>
</div>
</div>
</div>
But this method seems to mess up the layout.
Did I miss something in my code? It doesn't go as I intended.
You can nest your row classes within each other like so:
<div class="container">
<div class="row">
<div class="content1 col-xs-12 col-md-6">
6-Col-[X-Small] A
<div class="row">
<div class="content3 col-xs-12 col-md-12">
12-Col-[Medium] C
</div>
</div>
</div>
<div class="content2 col-xs-12 col-md-6">
6-Col-[X-Small] B
</div>
</div>
</div>
and then set a custom media query on the nested .content3 element
#media(min-width: 992px){
.content3{
width: calc(100% * 2);
}
}
The above uses the same width break point as Bootstrap's .col-md-12. At that threshold, the width of .content3 becomes twice that of it's nesting DIV.
Fiddle
<div class="container">
<div class="row">
<div class="content1 col-md-6">
6-Col-[X-Small] A
</div>
<div class="content2 col-xs-12 col-md-6">
6-Col-[X-Small] B
</div>
</div>
<div class="row">
<div class="content3 col-xs-12 ">
12-Col-[Medium] C
</div>
</div>
</div>
You'll have to duplicate some of your content(either column b or c) and add visible-xs and hidden-xs to the appropriate version of content. Initially, I didn't like the idea of duplicating the content, but then realized it made sense for optimization as I could load bigger/smaller photo depending on device.
See my previous similar question, with a great example Fiddle by #paulalexandru.
Here is the setup with your example content, and a Fiddle:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content1 col-md-6 purple">
6-Col-[X-Small] A
</div>
<div class="content3 col-md-12 visible-xs blue">
12-Col-[Medium] C
</div>
<div class="content2 col-md-6 red">
6-Col-[X-Small] B
</div>
<div class="content3 col-md-12 hidden-xs green">
12-Col-[X-Small] C V2
</div>
</div>
</div>
</div>
Note: The blue, red, green, purple classes are for easier visibility of what's going on in the example.
Also, if you've got content that is col-xs-12 and want it to also be col-12 at bigger screens, it will happen automatically. Don't specify col-xs-12 and col-md-12 If you do it seems to throw off the height (in this example anyways - why is a little unclear to me, but that's beside the point).
Patient: "It hurts when I do this..?" Dr: "Don't do that." :)
Also also, you'll notice a 2nd jump in layout at sm, because that's what lives between xs and md. Assuming you don't want that, you should replace col-md-* with col-sm-* in your example. Unless that's behaviour you want.