How to fix unexpected column order in bootstrap 4?

问题

I'm trying to make a layout like the following:

On xs devices, I'd like the order to be first-second-third.

The sample code I have is:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'/>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <style type="text/css">
     div.short  { height: 100px; background-color: rgb(174, 199, 232); }
     div.medium { height: 200px; background-color: rgb(255, 187, 120); }
     div.tall   { height: 400px; background-color: rgb(152, 223, 138); }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-sm-4 short order-sm-9">
          First column (short)
        </div>
        <div class="col-sm-8 medium order-sm-1">
          Second column (medium)
        </div>
        <div class="col-sm-4 tall">
          <p>Third column (tall)</p>
          <p>
            How to keep this <em>under</em> the first (blue) column
            when on <code>sm</code> or larger devices, while
            preserving the first-second-thrid order on <code>xs</code>
            devices?
          </p>
          <p>
            And why are these narrower columns on the left, rather
            than right?
          </p>
        </div>
      </div>
  </body>
</html>

What is happening is that the first and third columns end up upside down and on the left.

回答1:

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://www.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

来源：https://stackoverflow.com/questions/49306652/how-to-fix-unexpected-column-order-in-bootstrap-4

标签

css

flexbox

bootstrap-4