Website image container for optimal responsiveness

I recently started using Bootstrap 5 to build a new website and I encountered an issue with the layout of my feature and mission sections. I wanted the images to move above the text when the viewport is scaled down to mobile or tablet size, but I wasn't sure how to achieve this effect. On one page of my site, I managed to implement this functionality successfully using the following code snippet:

<div class="col-md col-12 order-1 order-md-0">
      <h3 class="display-3 text-start" pt-5>General Support</h3>
      <br>
      <!-- <br> -->
      <p class="text-start">
        Sit nisi ipsum sint incididunt qui amet cupidatat quis qui adipisicing excepteur ea consequat consequat. Anim qui non ex labore enim non Lorem. Sint sint consectetur magna quis proident anim. Ipsum dolor voluptate do veniam exercitation mollit quis adipisicing commodo labore voluptate cupidatat aliquip. Sint sit culpa nostrud laboris voluptate Lorem cupidatat.
        <br />
        <br />
        Proident deserunt nulla aliquip sint dolor. Labore qui quis cillum deserunt voluptate et nostrud et elit reprehenderit. Deserunt aliqua sint esse elit proident do excepteur proident anim. Adipisicing magna magna ullamco do ea in consectetur aliqua aliquip sint excepteur ex. Reprehenderit magna officia adipisicing exercitation qui sint amet fugiat et ipsum amet velit consectetur commodo. Eu duis laboris eiusmod ad quis ut voluptate. Nisi amet quis do laborum occaecat non mollit sunt.
        <br />
        <br />
        Culpa laborum occaecat exercitation deserunt nulla laboris est. Aliqua culpa et qui non mollit cupidatat excepteur. Labore ea ipsum sit est ipsum commodo velit adipisicing culpa aute et nostrud laboris. In ex velit proident veniam nostrud tempor duis ut sint.
      </p>
      <br />
      <div class="d-grid  col-6 mx-auto mb-4 text-start">
        <a href="./ticket-form">
          <button class="btn btn-primary" type="button" id="button">Submit&nbsp;a&nbsp;Ticket</button>
        </a>
          
        </div>
      </div>
  

However, I am now facing challenges replicating the same functionality on another section of my site. Here is the snippet of code where I am trying to implement this feature:

<!-- FEATURE SECTION START -->
    <section>
      <div class="container">
        <div class="row bg-white  mt-1 px-2">
          <div class="col-lg-6 col-sm-12">
            <img src="./src/img/feature-section.jpeg" alt=" logo" class=" img-fluid rounded float-start mb-2 img-fluid mt-1" id="#team-img">
          </div>
          <div class="col-lg-6 col-sm-12">
            <h2 class="display-6" id="about-heading">About Us</h2>
            <hr>
            <p class="lead mt-5">
              Aliqua esse eiusmod culpa dolore ea Lorem do labore labore proident nisi. Do labore sunt veniam Lorem veniam dolor fugiat fugiat excepteur amet officia ipsum velit. Proident ullamco sint magna nisi in sunt veniam qui sit. Fugiat est ullamco sint commodo officia nostrud dolore. Dolor pariatur mollit mollit veniam occaecat magna pariatur et cillum culpa laboris. Magna qui est aute quis veniam exercitation elit cillum eiusmod.
            </p>
            <a href="./about#about" class="btn btn-primary mt-3" id="button">Read&nbsp;More</a>
          </div>
        </div>
      </div>
    </section>
    <!-- FEATURE SECTION CLOSE -->

    <!-- MISSION SECTION START -->
    <section>
      <div class="container">
        <div class="row bg-white pt-5 px-2">
          <div class="col-lg-6 col-sm-12">
            <h2 class="display-6" id="mission-heading">Our Mission</h2>
            <hr>
            <p class="lead mt-5">
              Occaecat dolore in non magna cupidatat. Aliquip exercitation elit nulla elit sint in elit magna elit culpa nisi commodo fugiat. Dolore laborum cupidatat aliquip velit aliqua officia ipsum eu adipisicing. Qui do ut consectetur magna. Nostrud non irure culpa quis.
            </p>
            <a href="./about#mission" class="btn btn-primary mt-3 mb-3" id="button">Read&nbsp;More</a>
          </div>
          <div class="col-lg-6 col-sm-12">
            
            <img src="./src/img/team-section002.jpeg" alt=" logo" class="img-fluid mb-2 img-fluid rounded float-start" id="#team-img">
          </div>
        </div>
      </div>
    </section>
    <!-- MISSION SECTION CLOSE -->

Answer №1

Utilize Bootstrap ordering classes to rearrange columns based on screen size. Update: Replaced order-sm-1 and order-sm-2 classes with order-sm-first for the Mission section. See example below:

<!-- FEATURE SECTION START -->
<section>
  <div class="container">
    <div class="row bg-white mt-1 px-2">
      <div class="col-lg-6 col-sm-12">
        <img src="./src/img/feature-section.jpeg" alt=" logo" class="img-fluid rounded float-start mb-2 img-fluid mt-1" id="#team-img"/>
      </div>
      <div class="col-lg-6 col-sm-12">
        <h2 class="display-6" id="about-heading">About Us</h2>
        <hr>
        <p class="lead mt-5">
          Aliqua esse eiusmod culpa dolore ea Lorem do labore labore proident nisi. Do labore sunt veniam Lorem veniam dolor fugiat fugiat excepteur amet officia ipsum velit. Proident ullamco sint magna nisi in sunt veniam qui sit. Fugiat est ullamco sint commodo officia nostrud dolore. Dolor pariatur mollit mollit veniam occaecat magna pariatur et cillum culpa laboris. Magna qui est aute quis veniam exercitation elit cillum eiusmod.
        </p>
        <a href="./about#about" class="btn btn-primary mt-3" id="button">Read More</a>
      </div>
    </div>
  </div>
</section>
<!-- FEATURE SECTION CLOSE -->

<!-- MISSION SECTION START -->
<section>
  <div class="container">
    <div class="row bg-white pt-5 px-2">
      <div class="col-lg-6 col-sm-12">
        <h2 class="display-6" id="mission-heading">Our Mission</h2>
        <hr>
        <p class="lead mt-5">
          Occaecat dolore in non magna cupidatat. Aliquip exercitation elit nulla elit sint in elit magna elit culpa nisi commodo fugiat. Dolore laborum cupidatat aliquip velit aliqua officia ipsum eu adipisicing. Qui do ut consectetur magna. Nostrud non irure culpa quis.
        </p>
        <a href="./about#mission" class="btn btn-primary mt-3 mb-3" id="button">Read More</a>
      </div>
      <div class="col-lg-6 col-sm-12 order-sm-first">
        <img src="./src/img/team-section002.jpeg" alt=" logo" class="img-fluid mb-2 img-fluid rounded float-start" id="#team-img"/>
      </div>
    </div>
  </div>
</section>
<!-- MISSION SECTION CLOSE -->

More information can be found here

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

Display a pop-up window upon clicking anywhere on the webpage using jQuery and HTML

Is it possible for me to create a pop-up window that opens a specific website when a user clicks anywhere on the page, similar to pop-up companies? Can this be achieved using HTML, JavaScript, and jQuery? Any help would be greatly appreciated. ...

What is the best way to align this list horizontally with evenly distributed widths?

I am struggling to figure out how to turn this into a horizontal list where all the elements have equal width. If there is any missing information, please let me know by commenting or messaging. All the CSS that is not within the "grid" <li> is for ...

Use PHP to create a new JSON file on the server by submitting a form, then utilize a second form to update

My current goal is to create a json file using a form and then update that file with another form. Both of these processes are handled in the process.php file. I have managed to successfully update the json file if it is named as data.json initially in pro ...

Bootstrap CSS: arranging columns for mobile devices

UPDATE: Having implemented the solution provided in the accepted answer below, I find myself back at square one with the original layout before any adjustments were made. The issue still remains unresolved. Any advice on how to achieve the desired design o ...

Implementing Angular2 with conditional loading

One of the requirements for my project is to redirect users to the login page before loading the Angular2 application, without actually loading it. The project is built using angular2-quicksart. After minifying the Angular2 js file: <script> va ...

Interactive html5 canvas game with swiping mechanism

Currently, I am in the research phase for a new HTML5 canvas game that I want to create as a personal project to enhance my skills. Surprisingly, I have not been able to find any valuable articles or tutorials online about creating swipe-based games. The ...

Animations with absolute positioning not rendering correctly in Safari

I recently created a basic animation that involves setting an element to "position: absolute" in order to translate it. Everything functions perfectly as intended on Chrome, however, when testing it on Safari, the absolute positioning seems to be completel ...

What is the best way to retrieve a value from a form and incorporate it into a controller?

Here is the code I've been working on: http://pastebin.com/AyFjjLbW I started learning AngularJS and was making progress, but now I'm facing a challenge. I'm trying to use a drop-down menu to select both a priority level and a type of job t ...

Exploring the depths of HTML 5, harnessing the power of

As I embark on a new website project, I am excited to incorporate HTML5 for a fresh and dynamic look. To address potential compatibility issues with Internet Explorer, I have decided to utilize the resources provided by the HTML5 Boilerplate project. In m ...

Exclusive Checkbox Update

My code is causing me some trouble. When I click the update button, I want to only display the checked fields from the checkboxes on the redirected page. Below, I will share the code from the initial page, followed by the code from the second page where t ...

Ensuring that the empty bubble remains undisturbed, here's a guide on effectively implementing the if

I need assistance with adding an "if condition" to my text field. The condition should prevent the empty bubble from appearing when the send button is clicked. function verifyInput(){ var currentText = document.getElementById("demo").innerHTML; var x ...

Experience the enhanced features of Joomla 4 with a unique horizontal menu spanning across 2 rows

Currently, I am working with Joomla 4 using a customized Cassiopeia theme as the child theme. My goal is to display the menu items across two horizontal rows instead of one. However, whenever I add an item to the menu, it causes the navigation container to ...

Adjust the hue of the SVG sprite

I am currently using an SVG sprite as the background image for my project: .naar-logo { background: url(images/salt_sprite.svg) no-repeat -8px -78px; width: 36px; height: 49px; position: relative; top: 38px; } <div class="naar-logo ...

Steps for recognizing and navigating a hyperlink, and subsequently extracting information from a different webpage using BeautifulSoup

If only I could swiftly extract a title from a webpage, exhibit the title, move on to another page by following a link, acquire the title from that new page, and ultimately showcase the second title. The tasks for steps (1) and (4) are essentially identic ...

Enhancing functionality by integrating Jquery/JS with input fields and labels

I am currently facing a challenge in applying CSS to the label element when the corresponding input is selected. After attempting and failing to use input:checked + label due to limitations in the HTML structure that cannot be altered, I seek alternative ...

Collecting information from form submissions, accessing data from the database, and displaying the results

I am currently working on a project using nodejs, express, and mongodb within the cloud9 IDE. My goal is to create a page with a form that allows users to input data, search for corresponding information in the database, and display that data on the same ...

Converting JSON data to HTML using Handlebars

Can you assist me in transforming the following JSON data into a table with 3 columns: property name, property source, and property value? "result": { "total": 100, "config": { "propName1": { "source": "propsrc1", ...

Taking out arbitrary raphael shapes from the drawing board

In my current project, I am utilizing raphaeljs and socketIO to create a real-time data display. The canvas features circles that represent nodes, and these circles are stored in an object called nodeStatus, with the format nodeStatus[id].obj where the "id ...

A vertical divider within an ion-item collection

Currently, I am using Ionic and HTML to implement a vertical line within an ion-item in an ion-list. The desired outcome is to have something similar to this (the colored line after 'all-day'): I attempted the following approach: <ion-list&g ...

Include a scroll bar for menu items that contain submenus, while ensuring that the submenu items remain visible

Looking for a way to add a scrollbar to the courses menu list due to its excessive length (refer to the image below). The fixed top navbar prevents scrolling, making it necessary to implement a scrollbar within the menu itself. After applying the followin ...