时间戳

首页 > 解决方案 > 如何正常显示文本右侧的图像，但在移动设备上显示文本下方的图像？

css - 如何正常显示文本右侧的图像，但在移动设备上显示文本下方的图像？

问题描述

我想在桌面上的文本右侧显示图像，但在移动设备上显示相同的图像。努力通过谷歌寻找答案，自己无法破解。

有什么帮助吗？

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

谢谢！

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

http://jsfiddle.net/ncyL2hat/

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

标签： cssbootstrap-4.1.x

解决方案

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

推荐阅读