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

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

有什么帮助吗？

这就是我目前所拥有的。

谢谢！

我尝试使用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>

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

相关内容

最新更新

热门标签：