css - 小屏幕时在正文后显示 float 侧边栏

Question

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

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

我不想把正文改成另一个 float ，因为如果文本很长而侧边栏很短，我希望它环绕侧边栏。

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

Answer 1

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