How to Fix Unexpected Column Order in Bootstrap 4

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 on sm an up
  • float-left to float the columns when flexbox is disabled so that the tall columns wraps to the right
  • order-* 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 on lg 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



Leave a reply



Submit