Ways to utilize media queries for repositioning one div on top of another div

Question

Ways to utilize media queries for repositioning one div on top of another div

Utilizing Bootstrap 5 for website development, my aim is to enhance the responsiveness of the site across various devices.

For mobile users, I envision the image-containing div to appear above the div containing the header and paragraph content, but I'm uncertain on how to achieve this.

Here is the current mobile view:

https://i.sstatic.net/QMHlt.jpg

This is the code snippet:

h3:after {
  background: none repeat scroll 0 0 hsl(210, 55%, 41%);
  bottom: -10px;
  content: "";
  display: block;
  height: 2px;
  position: relative;
  width: 100px;
}

@media (min-width: 300px) {

}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>About | </title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">

Similar Challenge

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CCTV Services |</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="./css/all-services.css" />

html css frontend media-queries bootstrap-5

Answer 1

Answer №1

Give This a Shot:

Please be advised that I have substituted your image with a placeholder image for the code snippet to function properly.

h3:after {
     background: none repeat scroll 0 0 hsl(210, 55%, 41%);
     bottom: -10px;
     content: "";
     display: block;
     height: 2px;
     position: relative;
     width: 100px;
}
 @media (min-width: 300px) {
}

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>About | </title>
      <!-- <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> -->
      <link href="https://cdn.jsdelivr.net/npm/font-awesome@6.4.0/css/all.min.css" rel="stylesheet">
      <link rel="stylesheet" 
         href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
      <!-- <link rel="stylesheet" href="/css/index.css" /> -->
      <link rel="stylesheet" href="./css/about.css" />
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0/dist/js/bootstrap.bundle.min.js"></script>
      <!-- <script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script> -->
   </head>
   <body>
      <!-- ABOUT US SECTION  START -->
      <section>
         <div class="container text-start mt-3">
            <div class="row">
               <div class="col-md col-12 order-1 order-md-0">
                  <h3 class="display-3 text-start" id="about" pt-5>About Us</h3>
                  <br>
                  <p class="text-start">
                     We are dedicated IT professionals who excel in resolving a variety of IT-related challenges for our clients.
                     Utilizing cutting-edge technology, we offer hands-on assistance that empowers businesses to efficiently manage and sustain critical systems.
                  </p>
                  <br>
                  <p class="text-start">
                     At <Organization Name>, our focus is on harnessing technology to support our clients in reaching their business goals, whether they're launching a new project or executing an existing plan. Regardless of the scenario, we ensure seamless completion of projects, committing to delivering outstanding results that drive growth and success for our clients.
                  </p>
                  <br />
                  <div class="d-grid  col-6 mx-auto mb-4 text-start">
                     <button class="btn btn-primary" type="button" id="button">Submit a Ticket</button>
                  </div>
               </div>
               <div class="col-md col-12 order-0 order-md-1">
                  <img src="https://picsum.photos/200" class="img-fluid rounded float-start mb-3" alt="IT technicians working">
               </div>
            </div>
         </div>
      </section>
      <!-- ABOUT US SECTION  CLOSE -->

Clarification:

I adjusted col to col-md for both text and image to enable dynamic column widths beyond a certain screen size.

I included col-12 for the image and text to occupy full width and collapse on smaller screens.

Utilized order-md-x and order-x to alter the item order at different screen sizes.

Answer 2

Give This a Shot:

Please be advised that I have substituted your image with a placeholder image for the code snippet to function properly.

h3:after {
     background: none repeat scroll 0 0 hsl(210, 55%, 41%);
     bottom: -10px;
     content: "";
     display: block;
     height: 2px;
     position: relative;
     width: 100px;
}
 @media (min-width: 300px) {
}

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>About | </title>
      <!-- <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> -->
      <link href="https://cdn.jsdelivr.net/npm/font-awesome@6.4.0/css/all.min.css" rel="stylesheet">
      <link rel="stylesheet" 
         href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
      <!-- <link rel="stylesheet" href="/css/index.css" /> -->
      <link rel="stylesheet" href="./css/about.css" />
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0/dist/js/bootstrap.bundle.min.js"></script>
      <!-- <script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script> -->
   </head>
   <body>
      <!-- ABOUT US SECTION  START -->
      <section>
         <div class="container text-start mt-3">
            <div class="row">
               <div class="col-md col-12 order-1 order-md-0">
                  <h3 class="display-3 text-start" id="about" pt-5>About Us</h3>
                  <br>
                  <p class="text-start">
                     We are dedicated IT professionals who excel in resolving a variety of IT-related challenges for our clients.
                     Utilizing cutting-edge technology, we offer hands-on assistance that empowers businesses to efficiently manage and sustain critical systems.
                  </p>
                  <br>
                  <p class="text-start">
                     At <Organization Name>, our focus is on harnessing technology to support our clients in reaching their business goals, whether they're launching a new project or executing an existing plan. Regardless of the scenario, we ensure seamless completion of projects, committing to delivering outstanding results that drive growth and success for our clients.
                  </p>
                  <br />
                  <div class="d-grid  col-6 mx-auto mb-4 text-start">
                     <button class="btn btn-primary" type="button" id="button">Submit a Ticket</button>
                  </div>
               </div>
               <div class="col-md col-12 order-0 order-md-1">
                  <img src="https://picsum.photos/200" class="img-fluid rounded float-start mb-3" alt="IT technicians working">
               </div>
            </div>
         </div>
      </section>
      <!-- ABOUT US SECTION  CLOSE -->

Clarification:

I adjusted col to col-md for both text and image to enable dynamic column widths beyond a certain screen size.

I included col-12 for the image and text to occupy full width and collapse on smaller screens.

Utilized order-md-x and order-x to alter the item order at different screen sizes.

Answer 3

Answer №2

If you want to achieve a responsive design using Bootstrap 5, you can take advantage of its grid system and ordering classes. Here's a breakdown of how you can structure your HTML and apply the necessary classes:

/* Styling for image container */
.col-md-6.order-md-2 img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

/* Styling for header and text container */
.col-md-6.order-md-1 {
    padding: 20px;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
}

/* Media Query for screens with max-width of 767px (small screens) */
@media (max-width: 767px) {
    .col-md-6.order-md-2 img,
    .col-md-6.order-md-1 {
        width: 100%; /* Stack columns on top of each other */
        padding: 10px; /* Adjust padding */
        border: none; /* Remove border */
    }

    .col-md-6.order-md-1 {
        margin-bottom: 10px; /* Reduce spacing between containers */
    }
}

<div class="container">
    <div class="row">
        <div class="col-md-6 order-md-2">
            <!-- Image container -->
            <img src="your-image-source" alt="Image">
        </div>
        <div class="col-md-6 order-md-1">
            <!-- Header and text container -->
            <h2>Your Header</h2>
            <p>Your paragraph text here.</p>
        </div>
    </div>
</div>

Here's an explanation of the code:

The container class creates a fixed-width container that responds to different screen sizes.

The row class creates a row to hold your columns horizontally.

The col-md-6 class makes each column occupy half of the available width on medium screens and larger.

The order-md-2 class changes the order of columns on medium screens and larger, making the image container appear second.

The order-md-1 class changes the order of columns on medium screens and larger, making the header and text container appear first.

This setup ensures a responsive layout where the image container appears above the header and paragraph text container on smaller screens.

Remember to replace "your-image-source", "Your Header", and "Your paragraph text here." with your actual content and image source.

Bootstrap's grid system and utility classes like order-md-* simplify creating responsive layouts across different screen sizes without the need for extensive custom CSS for every breakpoint.

Answer 4

If you want to achieve a responsive design using Bootstrap 5, you can take advantage of its grid system and ordering classes. Here's a breakdown of how you can structure your HTML and apply the necessary classes:

/* Styling for image container */
.col-md-6.order-md-2 img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

/* Styling for header and text container */
.col-md-6.order-md-1 {
    padding: 20px;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
}

/* Media Query for screens with max-width of 767px (small screens) */
@media (max-width: 767px) {
    .col-md-6.order-md-2 img,
    .col-md-6.order-md-1 {
        width: 100%; /* Stack columns on top of each other */
        padding: 10px; /* Adjust padding */
        border: none; /* Remove border */
    }

    .col-md-6.order-md-1 {
        margin-bottom: 10px; /* Reduce spacing between containers */
    }
}

<div class="container">
    <div class="row">
        <div class="col-md-6 order-md-2">
            <!-- Image container -->
            <img src="your-image-source" alt="Image">
        </div>
        <div class="col-md-6 order-md-1">
            <!-- Header and text container -->
            <h2>Your Header</h2>
            <p>Your paragraph text here.</p>
        </div>
    </div>
</div>