What is the best way to showcase an image next to text on desktop, but have the image appear below the text on mobile devices?

Can anyone help me figure out how to display an image next to text on desktop and below it on mobile? I've been searching for solutions with no luck.

Any assistance would be appreciated!

This is my current code:

Thanks in advance!

I attempted using col-xs col-sm but it's not achieving the desired outcome

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing Next.js with custom CSS for React-Bootstrap components: A step-by-step guide

After installing the react-bootstrap module using the pm command and importing it into my _app.js file, I encountered an issue when trying to modify the Bootstrap code for my navbar component. The code snippet provided below showcases the navbar component: ...

cssreactjsnext.jsreact-bootstrap

CSS table border styling with display-table

I am trying to enhance my design by adding a border before the last row, but I haven't been successful so far. Any advice or recommendations would be highly valuable. Check out this Fiddle for reference For code examples, please visit the jsFiddle l ...

htmlcsscss-tables

A row divided into three segments in Twitter Bootstrap2, with the second segment spanning the rest

Looking to divide a row into three segments under the following conditions: The first segment should have a maximum height and always stay at the top (minimum height of 0; maximum height of 40%). If the content exceeds the max-height, a scroll bar sho ...

htmlcsstwitter-bootstrap

Is there a substitute for image cropping aside from the CSS clip property?

Looking to create an image gallery where thumbnails are cropped to 150px x 150px, but struggling with non-square rectangular images of various sizes. Adjusting width and height distorts the images. Are there alternative CSS or jQuery options for cropping ...

jquerycssgallerythumbnailscrop

Is there a way to position the tooltip above the sorter icon in Ant Design (antd) component?

I'm currently working on creating a table with sorter columns using the antd framework. Can anyone guide me on how to position the tooltip above the sorter icon? Below is a snippet of my UI. https://i.sstatic.net/fGoqA.png Specifically, I included t ...

javascriptcssreactjsantd

An easy way to create a hover effect on a URL link and dynamically change the

Is there a way to achieve the following? When hovering over various links, the image on the right changes. If no hover occurs, the default image will be displayed. https://i.stack.imgur.com/QXPXt.png ...

htmlcss

Is there a potential issue with descender tags causing the malfunction of HTML and CSS tags?

Having some trouble with my <p> tag in the CSS. Can't seem to figure out why it's not working correctly. Any help is appreciated. Here's the HTML: <body> <section> <section id="pictures"> <div> < ...

htmlcsstags

Are CSS generated elements limited to text content only?

Can CSS generated content be used for more than just text? Take for example the code snippet below, where the span is displayed as text rather than creating a new span element. .addbefore:before { content: "<span>dfsd</span>"; } ...

css

How about wrapping a large amount of text three times and including a "read more" link?

I am tasked with creating an HTML element that automatically detects when text has wrapped three times, truncates the content, and adds a "more..." link at the end of the third line. Can this be achieved? If yes, what is the process to implement it? ...

javascripthtmlcssword-wrap

Incorporating CSS sprites within an <img> element

I have a sprite that contains various logos. I am trying to extract a specific logo using the following css .prog_logo { background-image:url('../../image/sprite_logo.png'); } .prog_logo_prime { background-position:0px -81px; width:52px; height: ...

asp.netcsscross-browserbackground-imagecss-sprites

Is there a way to adjust the dimensions of the "col-sm-9" div class in terms of width and height?

Struggling to adjust the size of my , but for some reason, the height command in CSS isn't taking effect. How can I set a custom size for it? This is important for my image slider, as the col-sm-10 is just too large on my website. Looking forward to y ...

htmlcssbootstrap-4

Only the cursor CSS is applied to the parent div, not its individual elements within the div

The current issue with the CSS is that it doesn't apply to the cursor setting. It only works if I set cursor:not allowed; to the .bar class and not specific elements like .bar p. My objective is to have all the p elements initially set to not-allowe ...

jqueryhtmlcss

Is it possible to style a React component based on the rendering of another component?

I have a component called Search that I want to be displayed differently depending on which page is being rendered. On the homepage, I want it to appear at the bottom of the page, but on all other pages, I want it to be at the top. Currently, my app.js lo ...

javascriptcssreactjsreact-routerjsx

When the CSS class of a DIV is set to X in jQuery, the script will hide all other DIVs with a

Just starting to explore jQuery and still fresh on JS knowledge, I have the desire to craft a jQuery script. To begin with, here is my HTML snippet: <div id="user-controls"> <div class="choice" id="choice-all" onclick="showAll();">All< ...

javascriptjquerycsshtml

Using the swiper carousel on WordPress results in an unexpected horizontal scrolling issue

Running an Elementor website, I need to incorporate various image carousels within my post content. Initially, I created a template for each carousel using Elementor. However, I have now decided to switch to utilizing a shortcode that leverages Elementor&a ...

javascriptcsswordpressswiper.jselementor

Ways to insert a gap underneath every line

Hello, I'm struggling to create space below each line of code. I've tried using the br tag and margin property, but it didn't work. Can anyone help me with this? I'm not sure if the current HTML structure is correct or if I should swit ...

htmlcssrowlinespace

Using jQuery, adjust the width of child elements within a container by applying dynamic CSS styling

I am attempting to dynamically set the width of several child elements using jQuery. Here is what I am trying to achieve: Obtain the count of the desired containers (since there will be multiple instances of the .steps-container class in the DOM) Iterate ...

javascriptjquerycss

Any idea why divs are not fading in properly?

Seeking assistance to make these div's fade in, but they are not cooperating! Unsure if this is the most effective method, but aiming to acquire the skills needed to create animations similar to the ones on this website: When scrolling down the page, ...

jqueryhtmlcss

Using CSS to Position a Circle at the Top of a Border

Breaking down the complex issue into a simple statement, I am dealing with a blue circle inside a box with a red border. How can I ensure that the circle remains centered while overlapping the top horizontal line of the box's border? I tried differe ...

javascriptjqueryhtmlcss

What about an external ui-grid-menu-button option for customizing the

Looking for a solution to separate the ui-grid-menu-button from the top right of the table and position it elsewhere? Check out this Stack Overflow question from a year ago which unfortunately remains unanswered: External ui-grid-menu-button Struggling t ...

javascriptcssangularjsangular-ui-grid