Question

我正处于Web开发的初期，并且用bootstrap-4构建了一个简单的HTML网页。

我想水平显示2张卡，因此图像卡将位于文本卡的左侧。当屏幕较小时，我希望图像位于文本卡下方。但是，如果卡在第二张卡的左侧，它将自动显示在其上方。

我的代码是这样的：

<div class="container">
    <div class="card mb-3">
      <div class="row no-gutters">
        <div class="col-md-5">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Cranes_made_by_Origami_paper.jpg/220px-Cranes_made_by_Origami_paper.jpg" class="card-img-bottom" alt="...">
        </div>
        <div class="col-md-7">
          <div class="card-body">
            <p>The text card in the right to the image card.</p>
            <p>In small page the text card below to the image card.<br>But I want to display it above the image card.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <title>Que</title>

  <style type="text/css">

  </style>
</head>

<body>

  <div class="container">
    <div class="card mb-3">
      <div class="row no-gutters">
        <div class="col-md-5">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Cranes_made_by_Origami_paper.jpg/220px-Cranes_made_by_Origami_paper.jpg" class="card-img-bottom" alt="...">
        </div>
        <div class="col-md-7">
          <div class="card-body">
            <p>The text card in the right to the image card.</p>
            <p>In small page the text card below to the image card.<br>But I want to display it above the image card.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

水平结果是：

小屏幕的垂直结果是：

我想在小屏幕的文本卡的底部，下方显示图像，而在大屏幕的左侧显示图像。

谢谢您的帮助！

Answer 1

设置订单类 order-1，order-2和order-md-1，order-md-2 ，以更改台式机和移动设备的位置

由于Bootstrap 4是flexbox，因此更改order of columns很容易。列可以从1到12订购，响应式，例如order-md-12 order-2（最后在md上，第二在xs上）相对于父.row，响应排序类是订单优先，订单最后和订单0-订单12。

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <title>Que</title>

  <style type="text/css">

  </style>
</head>

<body>

  <div class="container">
    <div class="card mb-3">
      <div class="row no-gutters">
        <div class="col-md-5 order-md-1 order-2">
          <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Cranes_made_by_Origami_paper.jpg/220px-Cranes_made_by_Origami_paper.jpg" class="card-img-bottom" alt="...">
        </div>
        <div class="col-md-7 order-md-2 order-1">
          <div class="card-body">
            <p>The text card in the right to the image card.</p>
            <p>In small page the text card below to the image card.<br>But I want to display it above the image card.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

如何在不同的屏幕中将一张卡设置在左侧，将底部设置到第二张卡

1 个答案: