How can I display an image to the right of my text normally but display the image underneath my text on mobile?

Question

I'm wanting to display an image to the right of my text on desktop, but display the same image underneath on mobile. Struggling to find answers via Google and can't crack it myself.

Any help?

This is what I have so far.

Thanks!

I've tried using col-xs col-sm but doesn't achieve what I want

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>

I think it works the way you require. https://www.loom.com/share/ed9baecbb16a491db5dc166c93d13ece — m4n0, Jul 19 '19 at 14:25

score 0 · Answer 1 · edited Nov 19 '19 at 08:51

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

How can I display an image to the right of my text normally but display the image underneath my text on mobile?

1 Answers1