小屏幕时在正文后显示浮动侧边栏

Question

我有一个两列布局。左边是正文，右边是侧边栏(float: right; width: 30%).

在小型浏览器上，我想先显示正文，然后再显示边栏。但是，如果我使用媒体查询从边栏中删除 float，它会首先显示。

我不想让正文变成另一个 float，因为如果文本很长而边栏很短，我希望它环绕在边栏周围。

如果可能的话，我正在寻找不是Javascript的东西。

Answer 1

CSS `order` 属性

在移动屏幕中时尺寸：

使包含标签成为弹性容器（按列）
从边栏中删除 float 相关属性
将 order 属性应用到内容标签（带有文本的元素）和边栏
内容标签order属性的number值要小于sidebar的order值

以下演示功能：

600px+ 宽度

容器 - <article>
- 边栏 - <aside>
  - float: right
  - clearfix hack - article::after {...}
- 内容 - <p class="content">

600 像素最大宽度（手机）

容器 - <article>
- 弹性容器（列）
- 边栏 - <aside>
  - float: none
  - clearfix hack - 已删除
  - order: 3
- 内容 - <p class="content">
  - order: 2

演示

注意：在全页模式下查看演示，而不是在初始 iframe 中。调整 window 的大小以查看媒体查询工作。

:root {
  font: 400 3vw/6vh Arial
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 1vh 1vw;
}

main {
  width: 90vw;
  height: auto;
  margin: 5vh -6vw 10vh -6vw;
  padding: 3vh 15vw 5vh 5vw;
}

section {
  width: 100%;
  height: 100%;
}


/*
Begin Sidebar Rulesets
*/

aside {
  float: right;
  width: 30%;
  height: 50%;
  border: 3px ridge grey;
  margin-left: 3vw;
  padding: 5vh 1vw 5vh 2vw;
}


/*
Clearfix hack
*/

aside::after {
  content: "";
  clear: both;
  display: table;
}


/* 
End Sidebar Rulesets 
*/

header,
footer {
  padding: 2vh 0 2vh 0;
  margin: 2vh 0;
  line-height: 8vh;
}

header {
  border-bottom: 5px ridge grey;
}

footer {
  border-top: 5px ridge grey
}

h1 {
  font-size: 1.75rem;
  letter-spacing: 1vw;
  margin: 0 0 3vh;
}

h2 {
  font-size: 1.45rem;
  letter-spacing: 0.75vw;
  margin: 0 0 3vh;
}

h3 {
  font-size: 1.2rem;
  letter-spacing: 0.5vw;
  margin: 0 0 3vh;
}

address {
  float: right;
  font-size: 0.85rem;
  margin: 2vh 1vw 5vh 3vw
}

ul {
  list-style: none;
  padding-left: 1vw
}

li {
  margin-bottom: 2vh
}

.content {
  font-size: 0.9rem;
  line-height: 7vh;
}


/*
Begin Mobile Media Queries
*/


/*
Remove float properties from sidebar (aside)
Convert container (article) into a flex container
Use order property to rearrange how the flex-items appear
(header, p.content, aside)
*/

@media screen and (max-width: 600px) {
  article {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
  }
  article>header {
    order: 1;
  }
  .content {
    order: 2;
  }
  aside {
    float: none;
    width: 100%;
    order: 3
  }
  aside::after {
    content: none;
  }
}


/*
End Mobile Media Queries 
*/

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <!-- <link> tags go here -->
  <style>
    /* CSS Rulesets go here */
  </style>
</head>

<body>
  <main>
    <section>
      <header>
        <h1>Main Title</h1>
      </header>

      <!-- Begin Container -->
      <article>

        <header>
          <h2>Topic Title</h2>
        </header>

        <!-- Begin Sidebar -->
        <aside>
          <nav>
            <header>
              <h3>Sidebar Title</h3>
            </header>
            <hr>
            <ul>
              <li>
                <a href='#/'>Link</a>
              </li>
              <li>
                <a href='#/'>Link</a>
              </li>
              <li>
                <a href='#/'>Link</a>
              </li>
            </ul>
          </nav>
        </aside>
        <!-- End Sidebar -->

        <!-- Begin Content -->
        <p class='content'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae
          est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis
          tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan
          porttitor, facilisis luctus, metus</p>
        <!-- End Content -->

      </article>
      <!-- End Container -->

      <footer>
        <address>
          123 Main St.<br>
          Springfield, IL 12345<br>
          admin@mail.com
        </address>
      </footer>
    </section>
  </main>
</body>

</html>

Answer 2

可以使用cssgrid

来实现

/* Here 2fr for main text and 1fr for side bar */
grid-template-columns: 2fr 1fr;

屏幕尺寸不超过 600 像素

/* For mobile devices, it will be 1/1 grid */
grid-template-columns: 1fr;

 *{
  padding: 0;
  margin: 0;
 }
 .container{
  background: #f2f2f2;
  padding: 10px;
  height: 100vh;
 }

 .layout{
  display: grid;
        /* Actual style width 2 grid layout */
  grid-template-columns: 2fr 1fr;
  padding:5px;
 }

    .main-text{
     padding: 20px;
    }
 .side-bar{
  border: 2px solid #444;
 }
    /* For mobile devices with 1f 1/1 grid */
 @media (max-width:600px){
  .layout{
   grid-template-columns:1fr;
  }
 }

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container">
 <h3>Resize screen for responsive</h3>
 <div class="layout">
  <div class="main-text">
   <h2>Main text</h2>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices mollis cursus. Vestibulum aliquam, lorem quis porta sodales, diam mi tincidunt quam, vitae consequat erat neque in turpis. Nam massa libero, feugiat ut laoreet eu, interdum et erat. Morbi quis suscipit nunc, blandit congue sapien. Aenean faucibus nisi sit amet quam interdum, eget mollis enim rutrum. Etiam viverra vel magna quis rutrum. Maecenas ipsum urna, feugiat sed sagittis id, vehicula eu enim. Ut commodo odio vitae nibh posuere blandit. Nunc aliquam metus vitae vehicula tempus. Vivamus semper pharetra felis mollis pellentesque. Vestibulum quis velit feugiat, blandit tortor a, mattis turpis. Mauris varius nisl id ultricies tempus. Vivamus imperdiet euismod pellentesque. Nullam pretium elit id semper convallis.

  </div>
  <div class="side-bar">
   <h2>Side bar</h2>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultrices mollis cursus. Vestibulum aliquam, lorem quis porta sodales, diam mi tincidunt quam, vitae consequat erat neque in turpis. Nam massa libero, feugiat ut laoreet eu, interdum et erat. Morbi quis suscipit nunc, blandit congue sapien. Aenean faucibus nisi sit amet quam interdum, eget mollis enim rutrum. Etiam viverra vel magna quis rutrum.
  </div>
 </div>
</div>

Answer 3

First Solution using float on Desktop and using flex-direction on mobile Will give the result you want.

.sidebar {
    float: right;
    border: 1px solid;
    width: 200px;
}

@media (max-width:767px) {
 p, 
.sidebar {
  float: none;
width: auto;
}
.main {
    display: flex;
    width: 100%;
    flex-direction: column-reverse;
}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  
    <div class="main">
    <div class="sidebar"> <h1>Side bar</h1>
molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,
        molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,
        molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,
        molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</p>
    
  </div>
  
</div>

Helping Credits goes to @zer00ne

第二种解决方案如果不使用文本在侧边栏下换行 使用flex我们可以实现这一点。因为它有很多优点，可以在不改变 HTML 结构的情况下使用它的属性，而且它比 float

更成熟

.flex-container {
  display: flex;
  flex-direction: column;
}

.main {
  width: 100%;
  order: 1;
  padding: 0 1em;
}


.sidebar-aside {
  width: 100%;
  order: 2;
  padding: 0 1em;
  background-color: #cff;
}

@media (min-width: 40em) {
  .flex-container {
    flex-direction: row;
  }
  
  .main {
    flex: 1;
    order: 1;
  }
  
  .sidebar-aside {
    width: 15em;
    order: 2;
  }
}

<div class="flex-container">
  <main class="main">
    <article>
      <h1>Main Title</h1>
      <p>Some Content to fill the page.</p>
      <h2 id="topic-1">Topic 1</h2>
      <p>Info</p>
      <h2 id="topic-2">Topic 2</h2>
      <p>Info</p>
      <h2 id="topic-3">Topic 3</h2>
      <p>Info</p>
    </article>
  </main>
  <aside class="sidebar-aside">
    <h3>Side Bar</h3>
    <h4>Sidebar Title</h4>
    <p>Lorem epsum text is a dummy text</p>
  </aside>
</div>

You can change the order on different screens that which div comes first

Answer 4

    <!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <style>
      body {
        font-family: sans-serif;
      }

      .app {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
      }
      .main-text {
        flex-basis: 70%;
        background-color: #ddd;
        min-height: 200px;
      }
      .sidebar {
        flex-basis: 30%;
        background-color: #1a1a1a;
        color: white;
        min-height: 100px;
      }
      @media only screen and (max-width: 600px) {
        body {
          background-color: lightblue;
        }
        .app {
          flex-wrap: wrap;
        }
        .main-text {
          flex-basis: 100%;
        }
        .sidebar {
          flex-basis: 100%;
        }
      }
    </style>
  </head>

  <body>
    <div class="app" id="app">
      <div class="main-text">
        Main Text
      </div>
      <div class="sidebar">
        SideBar
      </div>
    </div>
  </body>
</html>

使用 flexbox 的简单解决方案，不涉及 javascript
class正文和侧边栏引用各自的组件
添加高度和背景颜色只是为了视觉效果，它们不是解决方案工作所必需的

Answer 5

Flexbox 解决方案：

html:

<div class='content'>
  <div class='main'><p> lorem ipsu... </p></div>
  <div class='sidebar'><p> lorem ipsu ... </p></div>
</div>

css:

.container{
  display: flex;
  flex-wrap: wrap;
}
.main{
  order: 1;
  width:70%;
}
.sidebar{
  order:2;
  width:30%;
}
@media (max-width:600px){
  .main{
    width:100%;
  }
}

我的想法是让主栏占据整个宽度，迫使侧边栏低于它。

小屏幕时在正文后显示浮动侧边栏

Show floating sidebar after main text when small screen

css

responsive-design

CSS `order` 属性

600px+ 宽度

600 像素最大宽度（手机）

演示

小屏幕时在正文后显示浮动侧边栏

Show floating sidebar after main text when small screen

css

responsive-design

CSS order 属性

600px+ 宽度

600 像素最大宽度（手机）

演示

CSS `order` 属性