Bootstrap 4 - Content positioned on the left side of the screen next to an image ... on mobile devices, the text appears below

How can I ensure in Bootstrap 4 (and possibly other versions) that the text appears to the left of the image on the screen, and that the image is displayed above the text on smartphones?

Here is my source code:

<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Text</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Image</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Image</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">Text</div>
</div>
</div>

flex-direction: row-reverse did not have the desired effect in this case.

htmlcsswebbootstrap-4media-queries

Answer №1

Utilize the .order classes to control the positioning of images on your webpage:

<div class="container">
  <div class="row">
    <div class="col-md-6 col-12">Text</div>
    <div class="col-md-6 col-12 order-first">Image</div>
  </div>
  <div class="row">
    <div class="col-md-6 col-12 order-first">Image</div>
    <div class="col-md-6 col-12">Text</div>
  </div>
</div>

https://getbootstrap.com/docs/4.4/layout/grid/#order-classes

You can customize the order based on screen width using the xs, sm, md, lg & xl classes, such as .order-md-first

https://jsfiddle.net/Sirence/cx6k1048/4/

Answer №2

To achieve the desired outcome, you can assign two separate classes to the outer divs with the class row. Utilize media queries to control the visibility of each div based on the screen size. Here is an example of how you can structure your code:

<div class="container">
<div class="row desktopView">
<div class="col-lg-6 col-md-6">Text</div>
<div class="col-lg-6 col-md-6">Image</div>
</div>
<div class="row mobileView">
<div class="col-sm-6 col-xs-12">Image</div>
<div class="col-sm-6 col-xs-12">Text</div>
</div>
</div>

@media (max-width: 576px) {
.desktopView {
  display: none;
}
.mobileView {
  display: block;
}
}

@media (min-width: 576px) {
.mobileView {
  display: none;
}
}

In this setup, the mobile div is hidden on desktop view and shown on mobile view. Hopefully, this clarifies things for you, @davideos477.

Answer №3

  • To achieve full width on mobile in Bootstrap 4 without using col-xs or sm classes, you can utilize the flexbox feature.
  • Bootstrap 4 utilizes flexbox which allows you to easily reorder elements on different screen sizes.
  • You can use the order-* class for Bootstrap ordering, such as order-sm-* or order-md-*.
  • For a Bootstrap 4 grid example, check out this link: Bootstrap 4 Grid example
  • To understand more about flexbox ordering, refer to this link: Flexbox Ordering

<div class="container">
    <div class="row">
        <div class="col-md-6 col-12">Text</div>
        <div class="col-md-6 col-12">Image</div>
     </div>
    <div class="row">
        <div class="col-md-6 col-12">Image</div>
        <div class="ccol-md-6 col-12">Text</div>
    </div>
</div>

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

Tutorial on integrating jquery ui's '.droppable' feature with the jQuery '.on' method

I have a main div with three inner divs labeled 1, 2, and 3 as shown below: <div id="main"> <div style="height:30px; background-color:yellow;" class="bnr">Banner</div> <div style="height:30px; background-color:yellow;" class=" ...

javascriptjqueryhtmlcssjquery-ui

What is the process for inserting HTML and CSS through the editor on DNN? Can markup be incorporated without the need for modules?

At my workplace, I do not have direct Host or Superuser access to DNN, and unfortunately, it is against company policy to grant me access to those accounts. This poses a challenge when trying to get my HTML/CSS to function correctly within the DNN HTML edi ...

htmlcsscontent-management-systemdotnetnuke

How do you retrieve specific colored elements from an array using jQuery (or plain JavaScript)?

I am currently in the process of creating interactive checklists. One feature I have implemented is changing the color of a header if all checkboxes associated with it are checked, as shown below: $("input[type='checkbox']").click(function(){ i ...

javascriptjquerycssarrays

What's causing these divs to be misaligned in various directions?

I am currently working with a front-end framework based on flexbox called Material-UI, and I have noticed that the layout of certain components, particularly the quantity control elements, appears to be different even though they all share the same styling ...

javascriptcssreactjsflexboxmaterial-ui

What is the best way to position an element in the center of the screen

What is the best way to vertically center a button within a div? Click here for an image of the issue I recently started learning HTML & CSS and I am struggling to align a button in the vertical center of a div. Text-align:center doesn't seem to be ...

htmlcss

Adding a Bootstrap carousel to an HTML page may cause the inner items to inexplic

I have been working on creating a User Projects section, and I wanted to display the projects in a carousel format. However, when I tried to import Bootstrap carousels, my items suddenly disappeared. Since I am coding on a tablet and not a computer, I am n ...

javascripthtmlcss

Creating consistent image sizes using Bootstrap or pure CSS styling

I've been attempting to create 6 images that are all responsive and the same size. I've tried using just CSS and also tried using bootstrap cards, but I can't seem to achieve the desired result. I've experimented with flexbox, grids, s ...

cssimagebootstrap-5responsivesizing

What steps should I take to adjust the text size in my media query?

I'm facing a challenge with a media query to decrease the font size of a text. It seems like a straightforward task, yet I can't pinpoint the issue. HTML: <div class="fp-featured"> <div class="fp-title">TITLE</div> <p class ...

htmlcss

Issue with jQuery draggable appendTo functionality not functioning as expected

Below is the code snippet: JavaScript jQuery $('.dragBox').draggable({ axis: 'y', appendTo: 'parent', containment: [0,0,0,150], start: function() { $(this).addClass('grab ...

jqueryhtmlcssdraggable

Exploring the world of web scraping using R's XML package with the powerful xpathS

I need help extracting the names of shopping malls from a specific website. The URL is provided here: After examining the html code, I noticed that the mall names are stored under the "h5" tag. I tried to extract the text using the following codes, but it ...

htmlrxmlweb-scraping

The issue with grunt-contrib-compass not functioning properly within npm

I recently installed npm and grunt, followed by installing grunt-contrib-compass. However, when I try to run grunt, I encounter the following error: Running “compass:dist” (compass) task Warning: not found: compass Use –force to continue. Aborted du ...

csssassnpmgruntjscompass

How to access bespoke attributes in Scene Builder using JavaFX?

I am on the hunt for a way to designate customizable properties for my custom controls. Jens Deters has already created some fantastic custom controls utilizing fontawesomefx for JavaFX. Once you import the jar files into Scene Builder, you can easily inc ...

cssjavafx-2custom-controlsscenebuilderdeclare-styleable

Track every click on any hyperlink throughout the entire webpage

I am attempting to capture any click event on a link throughout the entire page. For example, when a user clicks on the following link: <a href="/abc">abc<a/> I want to be able to retrieve the anchor tag like so: <span hre="/abc">abc& ...

javascriptjqueryhtml

Prevent webpage from resizing when window dimensions change

Whenever I resize my webpage window, the elements start to pile on top of each other and it looks disorganized. For example, when I reduce the window size, YouTube just cuts off everything instead of stacking the images. How can I achieve a similar effec ...

htmlcss

Creating a text container in PHP for displaying information

As someone who is new to PHP and HTML, I'm curious about the CSS statements needed to create a text box that will display a value from one of my PHP functions. Right now, the function retrieves data from an SQL server and returns it, but I would like ...

phphtmlcsstextbox

Switching iFrame based on dropdown selection

Hello, I'm a beginner in the world of programming and I'm currently experimenting with creating a webpage. However, I've encountered a roadblock and could use some help. My current goal is to change the source of an iFrame to a specific link ...

javascripthtmlbootstrap-4

Having Trouble with Form Submission Button Across Different Web Browsers

Having some trouble with my form - all fields are properly closed with tags, but when I click the submit button, nothing happens. The page is loaded with code, so here's the link for you to check it out. Unfortunately, right-click is disabled, so ple ...

phpjavascripthtml

Triggering the hidden radio button with an OnClick event

I am using the Bootstrap framework to design my user interface. I have a specific requirement where I need to display multiple buttons that function as radio buttons. <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary a ...

jqueryhtmltwitter-bootstraptwitter-bootstrap-3

Tips on using the Hover property in CSS for an element that includes both :after and :before properties

I've created a hexagon using CSS after and before properties, and now I'm attempting to add a glowing effect around the hexagon when hovering. It works perfectly for the center of the hexagon but not for the top and bottom points of the shape. ...

htmlcss

Images that adjust to different screen sizes within a grid layout

I have four images that need to be aligned in the following layout: ____________ |1 |4 | |_____| | |2 |3| | |__|__|______| They must be flush against each other, occupy 100% of the viewport's width, and most importantly, be respon ...

javascripthtmlcsstwitter-bootstrap