Question

我希望包含1的div位于台式机的右侧，而位于移动设备的顶部。是否可以使用bootstrap来实现这一目标，最好不要使用自定义CSS？

<!DOCTYPE html>
<html lang="en">

<head>
    <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                2
            </div>
            <div class="col-sm-4">
                1
            </div>
        </div>
</body>

</html>

Answer 1

您应使用bootstrap order classes来维护元素的顺序。这是您问题的现场演示-

Reordering Bootstrap

<!DOCTYPE html>
<html lang="en">

<head>
  <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <div class="row">

      <div class="container">
        <div class="row">
          <div class="col-md-6 order-md-2">
            <div class="card card-body bg-info">1st on mobile</div>
          </div>
          <div class="col-md-6">
            <div class="card card-body">2nd</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 2

有几种方法可以对列进行重新排序。我建议您使用bootstrap 4类而不是自定义CSS，因为您已经在使用bootstrap。

在HTML代码中，第一写入要在移动设备顶部放置的列。并使用 order-sm-1 类。但是我认为最好使用 order-sm-last ，因为它更直观。在这种特殊情况下，它们的功能相同。

<!DOCTYPE html>
<html lang="en">

<head>
  <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-4 order-sm-last bg-primary">
        First on mobile
      </div>
        <div class="col-sm-8 bg-danger">
        2 
      </div>
    </div>
  </div>
</body>

</html>

保持编写时的列顺序，并在第一列中使用 order-last 和 order-sm-first 。

<!DOCTYPE html>
<html lang="en">

<head>
    <link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-8 order-last order-sm-first">
                2
            </div>
            <div class="col-sm-4">
                First on mobile
            </div>
        </div>
        </div>
</body>

</html>

或者，您可以使用 order-1 和 order-sm-0

定义列的垂直堆叠顺序

2 个答案: