The sequence of Bootstrap columns collapsing into place

My first Bootstrap website is causing me some trouble. Currently, the content under the main jumbotron appears in a specific order on a full 1920x1080 page:

Statement   Image

Image   Statement

Statement   Image

However, when the website collapses to mobile size, the content displays like this:

Statement

Image

Image

Statement

Image

Statement

This layout is confusing for users as they struggle to match images with statements. It disrupts the flow of the web page. How can I alter the Bootstrap code so that the columns collapse differently, resulting in the following mobile display:

Statement

Image

Statement

Image

Statement 

Image

I've been unable to find a solution to this issue and I'm hoping someone has encountered it before. Thank you in advance for any assistance provided.

The formatting looks odd here, please refer to the jsfiddle link below:

HTML

Code: https://jsfiddle.net/mtpebs1x/
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To arrange the columns in a specific order, utilize the column ordering classes. For instance, applying order-md-2 to the left col-md-6 positions that column as the second on screens of md size and larger. On smaller screen sizes like sm and xs, it will be listed first.

Check out this link for more details: 

<div class="row paddingTopMain">
          <div class="col-md-6 order-md-2 darkgrey leftCol">
                  <h1>m Do Lore Lo m Do Lore Lo</h1>
                  <p>...</p>
          </div>
          <div class="col-md-6 darkgrey marginCenter">
                  <div id="leftColImg">
                  <img src="//placehold.it/200x200">
                  </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

My goal is to dynamically assign a class to an iframe element by identifying a specific class contained within the html of the iframe

I need assistance with adding a class to an iframe only if the body tag has a specific class name. Here is my attempt at writing some code: <iframe class='iframeContent' src='' width='100%' height='' frameborder= ...

javascriptcssclassiframe

The overlay background on the image does not seem to be functioning correctly

I'm currently working on adding an overlay to my image in order to darken it and display text over the top. I've tried using absolute positioning for both the image and overlay, but the overlay ends up covering the entire window and sitting above ...

htmlcssbackground-imageoverlay

What is the best way to choose the first div when there are multiple divs with the same name?

Is there a way to target only the first div with a specific class in a series of divs with the same name using CSS? Here is an example scenario: <div class="div">dsdas</div> <div class="div">123</div> <div class="div">73</ ...

htmlcssselect

Creating a suggestion box within an HTML container using JavaScript

https://i.sstatic.net/Asi5r.pngI am currently working on a page where users can click on a word and receive a small suggestion box (like a tiny popup) to choose synonyms they prefer. Although I believe this can be achieved with JavaScript, I haven't ...

javascriptjqueryhtmlcssajax

Enhancing Vertical Expansion of List Items (Twitter Ticker) through Responsive Design

Hey there! I've added a Twitter feed to my website, and you can check it out here: anibalcascais.com/tweet/twitter.html I'm working on making the layout of the feed responsive. Right now, the container div adjusts nicely, but when the browser wi ...

jquerycssresponsive-design

Glitch in CSS causing issues with drop-down menu

When hovering over the Gallery, the sub menu list displays next to each other, but I want Sub 1 and Sub 2 to display below each other as a dropdown. How can I improve this code and is there any unnecessary code in it? Here is the picture: HTML: <div ...

htmlcssdrop-down-menunavigation

What steps are involved in extracting a Flot animation?

Check out this cool animation of a diatomic chain in action on this website: http://lampx.tugraz.at/~hadley/ss1/phonons/1d/1d2m.php I'm interested in extracting it, specifically to create a gif. The HTML script for the animation is visible: var c= ...

htmljqueryflot

From PHP to Drupal Node with HTML transformations

Currently, I am developing a custom module on Drupal. Within this module, I have a requirement where users should be able to upload a PDF file. Once uploaded, the module should create a Node of type 'decision.' In the 'field_decision_text&ap ...

phphtmlpdfpdf-conversionnode-html-pdf

To identify the dynamically inserted and generated div element amidst the other elements on the page

My goal is to have a new div generated and inserted over the other elements on the page when a button is clicked. Here is the markup I've written: <div id="parent"> <div id="d1"> </div> <div id="d2"> </div&g ...

javascripthtmlcss

Adjust: Return scale to default

By applying transform: rotate(-2deg); to a section, I have created an effect where the section rotates slightly. Additionally, when the user hovers over the same section, it increases in size due to transform: scale(1.1);. However, on one specific page of ...

htmlcsscss-transforms

Why is the Footer component in Next.js Styling not staying at the bottom of the screen as intended?

Why is the Footer component not at the bottom of the screen in Next.js Styling? import Head from "next/head"; import Navbar from "./Navbar"; import Footer from "./Footer"; const layoutStyle = { display: "flex", flexDirection: "column", height: "10 ...

cssreactjsnext.js

Showing JSX/HTML content depending on the props received

Can you identify the name of this type of expression and do you know in what scenarios it should be applied? {props.type === "big" && <h2>{props.title}</h2>} ...

javascripthtmlreactjsjsx

Overriding custom CSS with react-bootstrap styles

While attempting to utilize the react-bootstraps accordion component, I encountered the necessity of the import statement import "bootstrap/dist/css/bootstrap.min.css"; in order for the accordion to function properly. However, upon adding this ...

cssreactjsreact-bootstrapbootstrap-5

Utilize personalized Bootstrap variables within your Angular application

I am attempting to customize the default colors of Bootstrap within my Angular project. I have established a _variables.scss file in the src directory. Within this file, I have included the following code: $primary: purple; Next, I imported my _variables ...

angularsassbootstrap-4

Having trouble getting static files to load in Python Django

I've been working on a Python Django project and I've been attempting to enhance its style using a styles.css file, but I'm facing some challenges. The project I'm working on is named "commerce" and the app is called "auctions". The st ...

pythoncssdjangodjango-staticfiles

Adjust the width of a DIV based on the width of its text content in CSS

Not long ago, I stumbled upon this fantastic example demonstrating how to incorporate material design elements in buttons. These buttons are created using a combination of classes that allow for easy customization with just a simple modification. However, ...

jqueryhtmlcsstextwidth

"Can you provide instructions on placing a span within an image

I am trying to figure out how to insert a <span> into an <image>, similar to the effect on the page . However, I do not want this effect to occur on hover(), but rather on click(). My goal is to insert "data-title" into the <span> and hav ...

javascriptjqueryhtmlcss

How can you horizontally align a collection of elements using CSS?

I'm struggling to align a paragraph element with a group of button elements using jQuery and CSS. This is my issue: My goal is to have all these elements on the same horizontal line at the top of the screen to make the most of the pixel real-estate. ...

javascriptjqueryhtmlcss

AngularJS allows you to add a required attribute to an input tag, which will

When incorporating the required field or email validation on the input tag in AngularJS, a tooltip appears. I am looking to eliminate this tooltip while utilizing Bootstrap. Any suggestions on how to achieve this? ...

angularjstwitter-bootstrapangular-ui-bootstrap

When an li element is styled with a width of 50% and floated to the left, it does not display the bullet points

When attempting to create a 2-column list, I implemented the following CSS: ul { overflow: hidden; } ul li { float: left; width: 50%; } However, I noticed that when I have 2 items in the list, the one on the right displays a list bullet while th ...

htmlcss