Question

我似乎无法弄清楚如何将我的侧边栏元素从我的主要内容下方移动到其上方。我在我的大部分网页上使用了flexbox，然后把我的maincontent放在一个，而我的侧边栏放在另一个。在大屏幕上，侧边栏位于右侧，应该是，在移动设备上，它会下降到主要内容之下。

我设置了侧边栏的样式，以便在一行中显示为小方块，但我希望它在移动设备上面上面我的主要内容，而不是在它下面。有没有办法实现这个目标？我真的可以用一些帮助搞清楚这一点。

我在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 */
}

Answer 1

Flex订单和媒体查询应该可以解决问题， see on codepen

HTML

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;
  }
}

CSS

{{1}}

如何将Flexboxed sidemenu从屏幕底部移动到移动设备顶部？

1 个答案: