Question

我想在台式机上的文字右侧显示图片，但在移动设备上的下方显示同一图片。努力通过Google寻找答案，而我自己也无法破解。

有帮助吗？

这是我到目前为止所拥有的。

谢谢！

我尝试使用col-xs col-sm，但没有达到我想要的目的

.text {
  text-align: center;
  color: black;
  font-size: 30px;
}

<div class="container">
  <div class="row">
    <div class="row justify-content-md-center">
      <div class="col-sm-6">
        <div class="text">
          <h1> Header</h1>
          <h1> sub-header</h1>
          <br />
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec venenatis tortor, id luctus nisi. Mauris aliquet felis ac lacus venenatis, eget porttitor est finibus. Aenean mi odio, sollicitudin et quam ut, pharetra eleifend magna. Vestibulum
            lorem metus, ultricies sed ipsum eget, vulputate rutrum enim. Aenean mattis sit amet justo nec hendrerit. Nulla quis volutpat tortor. Nunc ante enim, pharetra sed libero vitae, iaculis egestas nulla. Aenean ullamcorper, mauris vel ultricies
            blandit, erat augue gravida dui, vitae aliquet urna eros eu tellus. Nunc sagittis mi ex, sed gravida dolor imperdiet nec.
          </p>

        </div>
      </div>

      <div class="col-sm-6">
        <div class="text">
          <img src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg" class="img-fluid" />
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

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


  <title>Document</title>


  <style type="text/css">
    .text {
      text-align: center;
      color: black;
      font-size: 30px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="row">
      <div class="row justify-content-md-center">
        <div class="col">
          <div class="text">
            <h1> Header</h1>
            <h1> sub-header</h1>
            <br />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec venenatis tortor, id luctus nisi. Mauris aliquet felis ac lacus venenatis, eget porttitor est finibus. Aenean mi odio, sollicitudin et quam ut, pharetra eleifend magna. Vestibulum
              lorem metus, ultricies sed ipsum eget, vulputate rutrum enim. Aenean mattis sit amet justo nec hendrerit. Nulla quis volutpat tortor. Nunc ante enim, pharetra sed libero vitae, iaculis egestas nulla. Aenean ullamcorper, mauris vel ultricies
              blandit, erat augue gravida dui, vitae aliquet urna eros eu tellus. Nunc sagittis mi ex, sed gravida dolor imperdiet nec.
            </p>

          </div>
        </div>

        <div class="col">
          <div class="text">
            <img src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg" class="img-fluid" />
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

如何正常显示文字右侧的图片，但如何在移动设备上的文字下方显示图片？

1 个答案: