基于屏幕大小

Question

我有一个包含内容的大屏幕布局结构，然后是包含不同内容的侧边栏。它看起来像这样：

大屏幕布局

Content Line 1   ¦    Sidebar item 1
Content Line 2   ¦    Sidebar item 2
Content Line 3   ¦    Sidebar item 3
Content Line 4   ¦    Sidebar item 4
Content Line 5   ¦

最大的问题是这种布局在移动设备上看起来很糟糕，所以我的设计在移动设备上看起来要好得多。

小屏幕布局

Content Line 1
Sidebar item 1 Sidebar item 2
Content Line 2
Sidebar item 3 Sidebar item 4       
Content Line 3       
Content Line 4       
Content Line 5

麻烦的是，我不想根据屏幕大小更改HTML结构我只想使用mediaquery来更改CSS。但是，即使能够更改CSS，我也可以看到将侧边栏内容插入主要内容的方法。

我真的不知道这是否可行，特别是以与现代浏览器兼容的方式。我开始编写大屏幕布局，但问题是，如果屏幕尺寸很小，如何使用mediaquery（无JS）在主列表内容之间插入侧边栏内容。

body {}

.header {
  color: #81D2A0;
}

.subnav input {
  width: 100%;
  border: 0;
}

.main {
  float: left;
  width: 200px
}

.side {
  float: left;
  width: 200px;
}

<div class="header">
  Logo
</div>
<div class="subnav">
  <input class="search">
</div>
<div class="content">
  <div class="main">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
    </ul>
  </div>
  <div class="side">
    <ul>
      <li>Side 1</li>
      <li>Side 2</li>
    </ul>
  </div>
</div>