英文:
How to use media queries to move one div above another div
问题
I am using Bootstrap 5 to make a website and I am trying to make the website more responsive across all devices.
When someone is using a mobile device I want the div that holds the image to be above the div that contains the header and paragraph text, but I am not sure how to do that.
This is what it currently looks like on mobile:
This is my code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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) {
}
<!-- language: lang-html -->
<!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.3.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/about.css">
<link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- ABOUT US SECTION START -->
<section>
<div class="container text-start mt-3">
<div class="row">
<div class="col">
<h3 class="display-3 text-start" id="about" pt-5>About Us</h3>
<br>
<p class="text-start">
We are skilled IT professionals who specialize in solving a range of problems that our clients may face in the realm of IT.
Through the utilization of state-of-the-art equipment, we provide essential hands-on support that gives businesses the ability to effectively operate and maintain the crucial systems that keep them afloat.
</p>
<br>
<p class="text-start">
At , we are geared toward using the power of technology to help our clients achieve their business objectives whether it is a client who may be embarking on a new project or are in the process of executing a pre-existing plan. No matter the situation, we promise the smooth and effortless completion of your new or current projects. We are committed to delivering excellent results to our clients to help them achieve their goals and promote growth.
</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">
<img src="./src/img/about-001.jpeg" class="img-fluid rounded float-start mb-3" alt="IT technicians working">
</div>
</div>
</div>
</section>
<!-- ABOUT US SECTION CLOSE -->
</body>
</html>
<!-- end snippet -->
Similar Problem
<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<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.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="/Bootstrap/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- CCTV SERVICES SECTION START -->
<section>
<div class="container text-left mt-5">
<div class="row">
<div class="col-md col-12 order-1 order-md-0">
<h3 class="display-3 text-start" id="long">CCTV Services</h3>
<br>
<p>
<b>CCTV Services</b> are an essential component of any business. CCTV provides real-time monitoring of multiple locations; the security they supply is indispensable, allowing businesses to have peace of mind knowing that their CCTV system is working 24/7 to keep their employees, customers, and partners safe.
<br />
<br />
So when something goes amiss it is of utmost importance to get the right CCTV Support that has technicians who are equipped with the tools needed to get your CCTV system back online. So whether your cameras receive their power through LTE, solar energy, or anything in between we have the necessary equipment to get you back into action.
<br />
<div class="d-grid gap-2 col-6 mx-auto mb-4">
<button class="btn btn-primary" type="button" id="button">Submit a Ticket</button>
</div>
</p>
</div>
<div class="col-md col-12 order-0 order-md-1">
<div class="col">
<img src="./src/img/cctv-003.jpeg" class="img-fluid rounded float-start mb-3" alt="IT technician working">
</div>
</div>
</div>
</section>
<!-- CCTV SERVICES SECTION CLOSE -->
</body>
</html>
My Network Tab
英文:
I am using Bootstrap 5 to make a website and I am trying to make the website more responsive across all devices.
When someone is using a mobile device I want the div that holds the image to be above the div that contains the header and paragraph text, but I am not sure how to do that.
This is what it currently looks like on mobile:
This is my code:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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) {
}
<!-- language: lang-html -->
<!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 rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" /> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.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="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" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.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">
<h3 class="display-3 text-start" id="about" pt-5>About Us</h3>
<br>
<!-- <br> -->
<p class="text-start">
We are skilled IT professionals who specialize in solving a range of problems that our clients may face in the realm of IT.
Through the utilization of state-of-the-art equipment, we provide essential hands-on support that gives businesses the ability to effectively operate and maintain the crucial systems that keep them afloat.
</p>
<br>
<p class="text-start">
At , we are geared toward using the power of technology to help our clients achieve their business objectives whether it is a client who may be embarking on a new project or are in the process of executing a pre-existing plan. No matter the situation, we promise the smooth and effortless completion of your new or current projects. We are committed to delivering excellent results to our clients to help them achieve their goals and promote growth.
</p>
<br />
<div class="d-grid col-6 mx-auto mb-4 text-start">
<button class="btn btn-primary" type="button" id="button">Submit&nbsp;a&nbsp;Ticket</button>
</div>
</div>
<div class="col">
<img src="./src/img/about-001.jpeg" class="img-fluid rounded float-start mb-3" alt="IT technicians working">
</div>
</div>
</div>
</section>
<!-- ABOUT US SECTION CLOSE -->
<!-- end snippet -->
Similar Problem
<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
<meta charset="UTF-8">
<title>CCTV Services |</title>
<!-- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;700&display=swap" rel="stylesheet"> -->
<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.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="./css/all-services.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="/Bootstrap/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- CCTV SERVICES SECTION START -->
<section>
<div class="container text-left mt-5">
<div class="row">
<div class="col-md col-12 order-1 order-md-0">
<h3 class="display-3 text-start" id="long">CCTV Services</h3>
<br>
<p>
<b>CCTV Services</b> are an essential component of any business. CCTV provides real-time monitoring of multiple locations; the security they supply is indispensable, allowing businesses to have peace of mind knowing that their CCTV system is working 24/7 to keep their employees, customers, and partners safe.
<br />
<br />
So when something goes amiss it is of utmost importance to get the right CCTV Support that has technicians who are equipped with the tools needed to get your CCTV system back online. So whether your cameras receive their power through LTE, solar energy, or anything in between we have the necessary equipment to get you back into action.
<br />
<div class="d-grid gap-2 col-6 mx-auto mb-4">
<button class="btn btn-primary" type="button" id="button">Submit&nbsp;a&nbsp;Ticket</button>
</div>
</p>
</div>
<div class="col-md col-12 order-0 order-md-1">
<div class="col">
<img src="./src/img/cctv-003.jpeg" class="img-fluid rounded float-start mb-3" alt="IT technician working">
</div>
</div>
</section>
<!-- CCTV SERVICES SECTION CLOSE -->
</body>
</html>
My Network Tab
答案1
得分: 1
以下是您要翻译的内容：
尝试这个：
注意：我用一个虚拟图像替换了您的图像，以便片段正常工作
<!-- 开始片段：js 隐藏：false 控制台：true Babel：false -->
<!-- 语言：lang-css -->
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) {
}
<!-- 语言：lang-html -->
<!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 rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" /> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.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="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" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.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>
<!-- <br> -->
<p class="text-start">
我们是熟练的IT专业人员，专门解决客户在IT领域可能面临的一系列问题。通过使用最先进的设备，我们提供基本的实际支持，使企业能够有效运营和维护使它们维持运营的关键系统。
</p>
<br>
<p class="text-start">
在，我们致力于利用技术的力量帮助客户实现其业务目标，无论是一个可能正在启动新项目或正在执行预先存在计划的客户。无论情况如何，我们承诺顺利和轻松地完成您的新项目或当前项目。我们致力于为客户提供卓越的结果，帮助他们实现目标并促进增长。
</p>
<br />
<div class="d-grid col-6 mx-auto mb-4 text-start">
<button class="btn btn-primary" type="button" id="button">Submit&nbsp;a&nbsp;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 -->
<!-- 结束片段 -->
说明：
我将原文中的代码部分提取并翻译如上。
英文:
Try This:
Note: I replaced your image with a dummy image for the snippet to work
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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) {
}
<!-- language: lang-html -->
<!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 rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" /> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.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="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" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.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>
<!-- <br> -->
<p class="text-start">
We are skilled IT professionals who specialize in solving a range of problems that our clients may face in the realm of IT.
Through the utilization of state-of-the-art equipment, we provide essential hands-on support that gives businesses the ability to effectively operate and maintain the crucial systems that keep them afloat.
</p>
<br>
<p class="text-start">
At , we are geared toward using the power of technology to help our clients achieve their business objectives whether it is a client who may be embarking on a new project or are in the process of executing a pre-existing plan. No matter the situation, we promise the smooth and effortless completion of your new or current projects. We are committed to delivering excellent results to our clients to help them achieve their goals and promote growth.
</p>
<br />
<div class="d-grid col-6 mx-auto mb-4 text-start">
<button class="btn btn-primary" type="button" id="button">Submit&nbsp;a&nbsp;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 -->
<!-- end snippet -->
Explanation:
I changed col to col-md for both the text and the image so the columns get dynamic width only after a certain(intermediate) screen width.
I added col-12 for the image and the text so they take full width and collapse on top of each other below intermediate screen width.
I used order-md-x and order-x to order the items at different screen width.
答案2
得分: 0
要实现使用Bootstrap 5创建所需的响应式布局，您可以利用其网格系统和排序类。以下是如何构建HTML并应用必要的类：
<!-- language: lang-css -->
/* 图像div的样式 */
.col-md-6.order-md-2 img {
max-width: 100%;
display: block;
margin: 0 auto;
margin-bottom: 20px;
}
/* 标题和文本div的样式 */
.col-md-6.order-md-1 {
padding: 20px;
background-color: #f7f7f7;
border: 1px solid #ddd;
}
/* 针对最大宽度为767px的屏幕（小屏幕）的媒体查询 */
@media (max-width: 767px) {
.col-md-6.order-md-2 img,
.col-md-6.order-md-1 {
width: 100%; /* 让列在彼此上方堆叠 */
padding: 10px; /* 减小较小屏幕的填充 */
border: none; /* 在较小屏幕上移除边框 */
}
.col-md-6.order-md-1 {
margin-bottom: 10px; /* 减小div之间的间距 */
}
}
<!-- language: lang-html -->
<div class="container">
<div class="row">
<div class="col-md-6 order-md-2">
<!-- 这个div包含图像 -->
<img src="your-image-source" alt="Image">
</div>
<div class="col-md-6 order-md-1">
<!-- 这个div包含标题和段落文本 -->
<h2>Your Header</h2>
<p>Your paragraph text here.</p>
</div>
</div>
</div>
代码解释：
- container类用于创建响应式固定宽度容器。
- row类用于创建水平行以容纳列。
- col-md-6类应用于两个列。此类指示每个列应在中等大小屏幕（及更大屏幕）上占用可用宽度的一半。
- order-md-2类应用于第一个列（图像div）。此类更改中等大小屏幕（及更大屏幕）上列的顺序，使图像div显示在第二个位置。
- order-md-1类应用于第二个列（标题和文本div）。此类更改中等大小屏幕（及更大屏幕）上列的顺序，使该div显示在第一个位置。
这种安排将确保在较小屏幕上（如移动设备），图像div显示在标题和段落文本div的上方，从而创建您想要的响应式布局。
请确保用实际内容和图像源替换“your-image-source”、“Your Header”和“Your paragraph text here.”。Bootstrap的网格系统和order-md-*等实用类使得创建响应式布局相对容易，无需为每个断点编写自定义CSS。
英文:
To achieve the desired responsive layout using Bootstrap 5, you can utilize its grid system and ordering classes. Here's how you can structure your HTML and apply the necessary classes:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
/* Style for the image div */
.col-md-6.order-md-2 img {
max-width: 100%;
display: block;
margin: 0 auto;
margin-bottom: 20px;
}
/* Style for the header and text div */
.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%; /* Make the columns stack on top of each other */
padding: 10px; /* Reduce padding for smaller screens */
border: none; /* Remove border on smaller screens */
}
.col-md-6.order-md-1 {
margin-bottom: 10px; /* Reduce spacing between the divs */
}
}
<!-- language: lang-html -->
<div class="container">
<div class="row">
<div class="col-md-6 order-md-2">
<!-- This div holds the image -->
<img src="your-image-source" alt="Image">
</div>
<div class="col-md-6 order-md-1">
<!-- This div contains the header and paragraph text -->
<h2>Your Header</h2>
<p>Your paragraph text here.</p>
</div>
</div>
</div>
<!-- end snippet -->
Explanation of the code:
The container class is used to create a responsive fixed-width container.
The row class is used to create a horizontal row to hold your columns.
The col-md-6 class is applied to both columns. This class indicates that each column should occupy half of the available width on medium-sized screens (and larger).
The order-md-2 class is applied to the first column (image div). This class changes the order of the columns on medium-sized screens and larger, making the image div appear second.
The order-md-1 class is applied to the second column (header and text div). This class changes the order of the columns on medium-sized screens and larger, making this div appear first.
This arrangement will ensure that on smaller screens (like mobile devices), the image div appears above the header and paragraph text div, creating the responsive layout you're aiming for.
Make sure to replace "your-image-source", "Your Header", and "Your paragraph text here." with the actual content and image source you're using.
Bootstrap's grid system and utility classes like order-md-* make it relatively easy to create responsive layouts without needing to write custom CSS for every breakpoint.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论