我是编码新手，我正在为HTML/CSS任务制作个人主页。对于关于页面，我想在1列的文本和图像在桌面版本的另一列，但在移动设备上，在顶部的图像和底部的文本。在桌面版上，我可以按照我喜欢的方式显示这些列，但问题是，它们在移动版上也会保留在列中。有没有办法让它保持在桌面版本上的样子，但在移动版本上让图像放在文本的顶部而不是旁边?谢谢你！
*{
margin: 0;
padding: 0;
font-family: 'Noto Sans', sans-serif;
}
.header{
min-height: 100vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/banner.png);
background-position: center;
background-size: cover;
position: relative;
}
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav a{
color: #fff;
text-decoration: none;
font-size: 14px;
}
nav a:hover{
color:#f44336;
transition: .4s;
}
.nav-links{
flex:1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: #fff;
text-decoration: none;
font-size: 13px;
}
nav ul li a:hover{
color:#f44336;
transition: .4s;
}
.text-box{
width: 90%;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.text-box h1{
font-size: 54px;
}
.text-box p{
margin: 10px 0 40px;
font-size: 14px;
color: #fff;
}
nav .fa{
display: none;
}
@media(max-width: 700px){
nav{
display: flex;
padding: 4% 8%;
justify-content: space-between;
align-items: center;
}
.text-box h1{
font-size: 14px;
}
.text-box p{
font-size: 11px;
}
.nav-links ul li {
display: block;
}
.nav-links{
position: absolute;
background: #f44336;
height: 100vh;
width: 200px;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
transition: 1s;
}
nav ul li a:hover{
color:#12161d;
transition: .4s;
}
nav .fa{
display: block;
color: #fff;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul{
padding: 30px;
}
}
/*--footer--*/
.footer{
width: 100%;
text-align: center;
padding: 20px 0;
}
.icons .fa{
color: #808080;
margin: 0 13px;
cursor: pointer;
padding: 18px 0;
}
/*--about page--*/
.sub-header{
height: 50vh;
width: 100%;
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/background.jpg);
background-position: center;
background-size: cover;
text-align: center;
color: #fff;
}
.sub-header h1{
margin-top: 50px;
}
.about-us{
width: 80%;
margin: auto;
padding-top: 80px;
padding-bottom: 50px;
}
.about-col{
flex-basis:48%;
padding: 30px 2px;
}
.about-col img{
width: 100%;
}
.about-col h1{
padding-top: 0;
}
.about-col p{
padding: 15px 0 25px;
}
.row {
display:flex;
}
@media(max-width: 700px){
.about-col h1{
font-size: 14px;
}
.about-col p{
font-size: 10px;
}
.about-col{
flex-basis:48%;
padding: 20px 5px;
}
.about-col img{
width: 100%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Personal Homepage</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css">
<script src="https://kit.fontawesome.com/012219d900.js" crossorigin="anonymous"></script>
<style>
.text-box{
background-color: transparent;
color: #FFF;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<section class="sub-header">
<nav>
<a href="index.html">AMANDA YEE</a>
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li><a href="">ABOUT</a></li>
<li><a href="">GALLERY</a></li>
<li><a href="">CV</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<h1>ABOUT</h1>
</section>
<!--about content-->
<section class="about-us">
<div class="row">
<div class="about-col">
<h1>About Me</h1>
<p>Born and raised in the Bay</p>
</div>
<div class="about-col">
<img src="images/about.jpg" alt="girl smiling">
</div>
</div>
</section>
<!--Footer-->
<section class="footer">
<div class="icons">
<i class="fa fa-linkedin-square"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-envelope-o"></i>
</div>
</section>
<!--Javascript for Toggle Menu-->
<script>
var navLinks = document.getElementById("navLinks");
function showMenu(){
navLinks.style.right = "0";
}
function hideMenu(){
navLinks.style.right = "-200px";
}
</script>
</body>
</html>改变元素位置的方法之一是使用flex-direction。我通常创建一个父容器并添加display: flex;。默认情况下，flex是面向行的。当我需要元素在一列时，我为容器创建了一个flex-direction: column;媒体。下面是一个示例
.container {
display: flex;
}
@media screen and (max-width: 700px) {
.container {
flex-direction: column;
}
}
/* Just some styles, not important */
.element {
width: 50%;
padding: 1rem;
border: 1px solid black;
}<div class="container">
<div class="element">Element one</div>
<div class="element">Element two</div>
</div>