我似乎不太明白如何将侧边栏元素从主要内容下方移动到其上方。我在我的大部分网页上使用了 flexbox，然后将我的主要内容放在一个中，而我的侧边栏放在另一个中。在大屏幕上，侧边栏应该在右侧，在移动设备上，它会下降到主要内容下方。
我对侧边栏进行了样式设置，使其显示为一排小框，但我希望它在移动设备上高于我的主要内容，而不是低于它。 有什么办法可以做到这一点？我真的需要一些帮助来解决这个问题。
我把 wrapper、main-content 和 sidebar 放在 codepen 上，这样你就可以看到: https://codepen.io/Pinchofginger/pen/WddJQW?editors=1100
我的代码
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body" id="index">
<header class="mainheader">
</header>
<div class="wrapper">
<div class="main">
<article class="top-boks">
<header>
<h1>Velkommen til vores hjemmeside</h1>
</header>
<footer>
<p class="underrubrik"> Et trygt hjem for herreløse katte </p>
</footer>
<img src="billeder/Katte/siam.png" class="mellemh" alt="Burmeser fodres af kvinde" />
<!-- 1 --------------------------------------------------------------------------->
<div class=brodtekst >
<p> Vi arbejder utrætteligt på at give hjemløse tamkatte tilfredsstillende levevilkår. </p></div><!-- End, brodtekst -->
</article>
</div> <!-- End, main-->
<div class="sidemenu">
<aside class="sidebar1">
<article>
<a href="megadoner.html"><button class="landingbutt" id="Mega" type="button"><i class="fa fa-paw" aria-hidden="true"></i>
<h3> Denne måneds <div class="knaek">MegaDonerer!</div></h3></button></a>
</article>
</aside>
<a href="frivillig.html" class="pleje"><aside class="sidebar2" class="pleje">
<article>
<h3>Plejefamilier og Frivillige søges</h3>
</article>
</aside></a>
<a href="mathilde.html">
<aside class="sidebar2">
<article>
<h3>Ugens kat</h3> <img src="billeder/Katte/Mathilde.jpg" alt="Mathilde">
<h5> Mathilde,</h5>
<p>dejlig senior-kat med masser af charme</p>
</article></aside></a>
<a href="sailor.html">
<aside class="sidebar2">
<article>
<h3>Ugens kat</h3>
<img src="billeder/ungkat/sailor.jpg" alt="Sailor" >
<h5> Sailor, </h5>
<p>livlig og kær energibombe</p>
</article>
</aside></a>
<a href="mrgrey.html">
<aside class="sidebar2">
<article>
<h3>Ugens killing</h3>
<img src="billeder/killinger/mr.grey.jpg" alt="Mr.Grey" >
<h5>Mr.Grey,</h5>
<p>en herlig lille gut med fuld fart på!</p>
</article>
</aside></a>
<a href="donation.html">
<aside class="sidebar3" id="donation">
<article>
<img src="billeder/doner4.png">
</article>
</aside></a>
</div> <!-- End, Sidemenu -->
</div> <!-- End, wrapper-->
<footer class="mainfooter">
<div id="footerbrodtekst ">
<h3> Sponsorer </h3>
<p>
<a href="http://www.hillspet.dk/" target="_blank">
<img class="sponsor" src="billeder/Hillslogo.jpg" alt="Hills Logo"></a>
</p>
<h3>Følg os online</h3>
<div id=socialbar>
<a href="https://da-dk.facebook.com/S%C3%B8nderborg-Kattelaug-223954954290456/" target="_blank"><img src="billeder/facebookicon.png" alt="facebook icon"></a>
<a href="http://youtube.com" target="_blank"><img src="billeder/youtubeicon.png" alt="youtube icon"></a>
<a href="http://snapchat.com" target="_blank"><img src="billeder/snapchaticon.png" alt="snapchat icon"></a>
</div>
</div>
</body>
</html>
CSS
.sidemenu { display: flex;
display: -webkit-flex;
display:-moz-flex;
-webkit-justify-content: flex-start;
justify-content: flex-start;
flex-shrink: 0;
width:100%;
flex-direction:row;
-ms-flex-direction:row;
height:100%;}
.sidebar1 {display:none;}
.sidemenu img { height:70px; width:100%; margin: 0 auto; }
.sidemenu p{display:none;}
.sidebar1, .sidebar2, .sidebar3 {
border: 1px solid lightgrey; }
.sidebar1 {
text-align: center;
width: 100%;
margin-top: 3px;
background-color: white;
margin: 0 auto;
padding: 1% 1% 1% 1%;
border-radius: 5px;
}
.sidebar2 {
text-align: left;
width: 100%;
background-color: white;
margin: 1% 0 0 0;
padding: 0 1% 1% 1%;
border-radius: 5px;
}
.sidebar3 {
text-align: left;
width: 100%;
background-color: white;
margin: 1% 0 1% 0;
padding: 0 1% 10% 1%;
border-radius: 5px;
}
.body {
margin: 0 auto;
/* Alt er centreret*/
width: 99%;}
.wrapper {display: flex;
display: -webkit-flex;
display:-moz-flex;
flex-direction: column;
-ms-flex-direction:column;
height: 100%;}
.main {
display: flex;
display: -webkit-flex;
display:-moz-flex;
flex-direction:column;
-ms-flex-direction:column;
flex-shrink: 0;
border-radius: 5px;
/* pæne runde hjørner*/
}
.underrubrik {display: none;}
.top-boks {
background-color: white;
border-radius: 5px;
/* pæne runde hjørner*/
-webkit-border-radius: 5px;
/* IE */
margin: 1% 0 1% 0;
padding: 3% 3% 3% 3%;
}
.bund-boks {
background-color: white;
border-radius: 5px;
margin: 1% 0 1% 0;
padding: 3% 3% 3% 3%;
}
/************* TABLE! *************************************/
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin: 1%;
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 10px;
font-size: 1em;
/* font-style: bold !important; does not work error*/
}
tr:nth-child(even) {
background-color: lightgrey;
}
/******************************************************************************/
/* FOOTER! */
/******************************************************************************/
.mainfooter {
display: flex;
display: -webkit-flex;
display:-moz-flex;
/* Lækkert layout, alt på linje og ude i kanterne */
justify-content: space-between;
width: 100%;
height: auto;
font-size: 14px;
float: left;
background-image: url("billeder/katte/soph.png");
background-size: cover;
margin: 0 auto;
padding: 5px;
position: relative;
color: white;
border-bottom: solid 1px #444444;
text-shadow: 0 1px 0 #404040;
border-radius: 5px;
/* pæne runde hjørner*/
-webkit-border-radius: 5px;
/* IE */
}
最佳答案
flex 顺序和媒体查询应该可以解决问题， see on codepen
HTML
<body>
<main></main>
<aside></aside>
</body>
CSS
body {
display: flex;
height: 100vh;
}
main {
background: red;
width: 90%;
}
aside {
background: blue;
width: 10%;
}
@media all and (max-width: 760px) {
body {
flex-wrap: wrap;
}
aside, main {
width:100%;
}
aside {
order: -1;
}
}
关于html - 如何在移动设备上将 flexbox 侧边菜单从屏幕底部移动到顶部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48154152/