Question

我尝试制作如下布局：

在xs设备上，我希望订单是第一至第二位。

我的示例代码是：

＆＃13;

<!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>

＆＃13;

正在发生的事情是第一列和第三列最终颠倒而在左侧。

Answer 1

Bootstrap 4使用flexbox ，因此列总是高度相等，并且您无法在大屏幕上获得所需的布局。解决方案是禁用sm及更高版本的flexbox。使用浮动使第3个较高的列浮动到右侧。 flexbox order-适用于移动设备（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禁用sm上的flexbox
float-left浮动列，以便高柱包裹到右边
order-*在移动设备上获得所需的订单

相关：
Bootstrap with different order on mobile version
Empty vertical space between columns in Bootstrap 4

如何修复bootstrap 4中的意外列顺序？

1 个答案: