How to fix unexpected column order in bootstrap 4?
Bootstrap 4 uses flexbox, so the columns are always going to be equal height, and you'll not be able to get the layout that you want on larger screens. The solution is to disable the flexbox for sm
and up. Use floats so that the 3rd taller column floats to the right. The flexbox order-
will work on mobile (xs
).
https://codeply.com/go/c31HUTtXra
<div class="container">
<div class="row d-sm-block">
<div class="float-left col-sm-8 medium order-2">
Second column (medium)
</div>
<div class="float-left col-sm-4 short order-1">
First column (short)
</div>
<div class="float-left col-sm-4 tall order-3">
<p>Third column (tall)</p>
..
</div>
</div>
</div>
d-sm-block
disables flexbox onsm
an upfloat-left
to float the columns when flexbox is disabled so that the tall columns wraps to the rightorder-*
to get the desired order on mobile
Related:
Bootstrap with different order on mobile version
Empty vertical space between columns in Bootstrap 4
Bootstrap 4 - Stack 2 columns with 1 large column on the right
I've answered a similar questions here:
How to fix unexpected column order in bootstrap 4?
One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
You need to override the flexbox on the row to get the taller column to float right. This can be done using d-md-block
on the row, and the float-* on the columns.
<div class="container">
<div class="row d-md-block">
<div class="col-9 border float-left">
1 of 3
</div>
<div class="col-3 border taller float-right">
2 of 3
</div>
<div class="col-12 col-md-9 border">
3 of 3
</div>
</div>
</div>
https://www.codeply.com/go/yYtp645znZ
Bootstrap with different order on mobile version
Because Bootstrap 4 uses flexbox, the columns are always going to be equal height, and you'll not be able to get the desktop (lg) layout that you want.
One option is to disable the flexbox for lg
. Use floats so that the 1,3 columns naturally pull to the right, since 2 is taller. The flexbox order-
will work on mobile.
https://codeply.com/go/8lsFAU3C5E
<div class="container">
<div class="row d-flex d-lg-block">
<div class="col-lg-8 order-1 float-left">
<div class="card card-body tall">2</div>
</div>
<div class="col-lg-4 order-0 float-left">
<div class="card card-body">1</div>
</div>
<div class="col-lg-4 order-1 float-left">
<div class="card card-body">3</div>
</div>
</div>
</div>
How this works
- Keep columns in the same row, since ordering is relative to parent
- The
d-flex d-lg-block
disables flex onlg
and up - The
float-left
float the columns when flex is disabled - The
order-*
reorder the columns when flex is enabled
Another option is some flexbox wrapping hack that uses w-auto
...
https://codeply.com/go/mKykCsBFDX
Also see:
How to fix unexpected column order in bootstrap 4?
Bootstrap Responsive Columns Height
B-A-C -> A-B-C
Unexpected behavior in div alignment in bootstrap grid layout
The problem is that your cols has different height so they stop in the first free space on the left.
You can force correct alignment using some empty rows between blocks.
check this pen:
http://codepen.io/anon/pen/GjWdKa
<div class="row visible-sm visible-xs"></div>
<div class="col-lg-4 col-md-4 col-xs-6 block-ft">
<h2>Shopping with Us</h2>
...
For example in this case i force 'Shopping with Us' col to float in a new row for sm
and xs
size.
Replicating bootstrap column structure on site that can't use bootstrap
Try the below code. This is without bootstrap. This will help to solve your problem.
.row {
display: flex;
flex-wrap: wrap;
}
.col{
width: calc(100% / 4 - 30px);
margin: 0 15px 30px;
}
img {
max-width: 100%;
height: auto;
width: 100%;
}
@media(max-width: 990px) {
.col{
width: calc(100% / 2 - 30px);
}
}
<div class="team-icons row">
<div class="col">
<img src="https://via.placeholder.com/300x70">
</div>
<div class="col">
<img src="https://via.placeholder.com/300x70">
</div>
<div class="col">
<img src="https://via.placeholder.com/300x70">
</div>
<div class="col">
<img src="https://via.placeholder.com/300x70">
</div>
</div>
Can we reorder elements when they are present inside different parents?
You can make use of CSS Grid. I played around with a Grid Generator here. Please use full screen mode to view the output.
Note: If anyone can reduce this code, please do since I just dived into CSS Grid.
JSfiddle Demo
.container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr 1fr; grid-column-gap: 10px; grid-row-gap: 10px; height: 500px;}
.div1 { grid-area: 1 / 1 / 3 / 3; background: #00A2E8;}
.div2 { grid-area: 3 / 1 / 5 / 3; background: #22b14c;}
.div3 { grid-area: 1 / 3 / 5 / 5; background: #ED1C24;}
@media ( max-width: 600px) { .div1 { grid-area: 1 / 1 / 2 / 5; } .div2 { grid-area: 4 / 1 / 5 / 5; } .div3 { grid-area: 2 / 1 / 4 / 5; }}
/* Additional styles */
.container>div { color: #fff; font-size: 2em; display: flex; justify-content: center; align-items: center;}
<div class="container"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div></div>
Column Ordering in Bootstrap3 not working as expected
Pay attention to the push
and pull
classes you're setting for each column, at the lg
size you need to reset those that were set in smaller sizes. So for the first column you need to reset push
not pull and for the second you need to reset both:
<div class="row">
<div class="col-xs-4 col-sm-push-8 col-md-push-4 col-lg-push-0">1</div>
<div class="col-xs-4 col-sm-pull-4 col-md-push-4 col-lg-pull-0 col-lg-push-0">2</div>
<div class="col-xs-4 col-sm-pull-4 col-md-pull-8 col-lg-pull-0">3</div>
</div>
Demo fiddle
UPDATE
To answer your question on why in this case it's not needed to reset the pull on the middle column at medium size:
Bootstrap uses the left
and right
CSS properties to push and pull the columns respectively and when you're at the medium size breakpoint both properties are set (since values from smaller sizes are propagated to the larger ones), when this happens, it's defined in the CSS specification that the left
property (push) has precedence and the right
property is effectively ignored.
This means that if you were to have the classes in reverse order, first pushing and then pulling you WOULD need to reset the left property using col-md-push-0
:
<div class="col-sm-pull-4 col-md-push-4">No Reset (Push has precedence)</div>
<div class="col-sm-push-4 col-md-pull-4 col-md-push-0">Reset is needed</div>
Related Topics
How to Efficiently Load Google Fonts in Nuxt
Chrome Issue with Background-Attachment Fixed and Position Fixed Elements
Bootstrap 3 Align Text to Bottom of Div
Dynamically Change a CSS Class' Properties with Angularjs
Why Does This Calc() Function Not Work in Transform Scale
The 'Justify-Content' Property Isn't Working
CSS Gradient Checkerboard Pattern
How to Make Circular Background Using CSS
How to Override Global CSS in a CSS Module File
Make Scrollbars Only Visible When a Div Is Hovered Over
How to Apply Custom Animation Effect @Keyframes in Mui
Issue with Input & Select Tag Height in Form
Select Menu Option Border None
Minmax Fails (Invalid Property Value)