在调整大小时将左列移动到中心列下方

Question

我有一个基本的3列布局，对于移动设备，我希望左侧边栏移动到中心列下方。这是基本的HTML结构：

<header></header> 
<div class="page-container">

<div class="left-column"></div>
<div class="center-column"></div>
<div class="right-column"></div>

</div>
<footer></footer> 

这是一张显示我想要完成的内容的图片：

对我来说，红盒子是否在蓝色盒子的顶部蜿蜒而不是反过来并不重要。

Answer 1

您可以使用flexbox。

    SortedDictionary<Tuple<int, int>, string> points = new SortedDictionary<Tuple<int, int>, string>();
    string debug1 = "", debug2 = "";
    foreach (ListViewItem item in listView1.Items)
    {
        Tuple<int, int> tp = new Tuple<int,int>(item.Position.Y, item.Position.X);
        points.Add(tp, item.Text);
        debug1 += item.Text;
    }

    foreach (KeyValuePair<Tuple<int, int>, string> kvp in points)
    {
        debug2 += kvp.Value;
    }
    MessageBox.Show(debug1); //orignal order
    MessageBox.Show(debug2); //sort by position

.page-container{
  background-color: black;
  display:flex;
  justify-content: space-between;
}
.left-column{
  background-color: red;
  flex: 2;
}
.center-column{
  background-color: green;
  flex: 5;
}
.right-column{
  background-color: blue;
  flex: 2;
}

@media(max-width:640px){
  .page-container{
    flex-direction: column;
  }
.left-column{
  background-color: red;
  flex: 1;
  order: 2;
}
.center-column{
  background-color: green;
  flex: 1;
  order: 1;
}
.right-column{
  background-color: blue;
  flex: 1;
  order:3;
}
}

https://developer.mozilla.org/en/docs/Web/CSS/order

Answer 2

使用media query更改页面基于屏幕大小的外观。你可能想要有几个不同的媒体查询，但标准是：

@media (max-width: 600px) {
  .left-column, .center-column, .right-column {
    width: 100%;
  }
}

你可以通过自己指定一堆媒体查询来做到这一点，但我建议你研究一个框架来为你处理'快照点'。

我强烈推荐的是Bootstrap。

希望这有帮助！

Answer 3

您可以在flexbox中布置桌面和移动视图，并使用order通过媒体查询重新定位内容div。

这是一个简单的例子。

body,html {
  min-height: 100vh;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
header,footer {
  background: black;
  height: 50px;
}

.page-container {
  display: flex;
  flex-grow: 1;
}
.left-column {
  background: red;
}
.center-column {
  background: green;
  flex-grow: 1;
}
.right-column {
  background: blue;
}
.left-column,.right-column {
  width: 100px;
}

@media (max-width: 640px) {
  .page-container {
    flex-direction: column;
  }
  .center-column {
    order: -1;
  }
  .left-column,.right-column {
    min-height: 25px;
    width: auto;
  }
}

<header></header>
<div class="page-container">

  <div class="left-column"></div>
  <div class="center-column"></div>
  <div class="right-column"></div>

</div>
<footer></footer>