缩放

Question

是否有可能重新排列＆＃34;当我缩小窗口时我的div块？ 例如，当我缩小到0-770px宽度窗口时，红色div应出现在蓝色div之前。但是当窗口是最小的时候。 771px，蓝色div应出现在红色div之前。

我不确定是否可以使用Javascript，但是没有javascript的解决方案是不可取的。

谢谢！

＆＃13;

＆＃13;

@charset "utf-8";

/* CSS Document */

#wrapper {
  width: 1000px;
  height: auto;
  background-color: grey;
}

#boks-green {
  width: 50%;
  background-color: green;
  height: 400px;
  display: block;
  float: left;
}

#boks-blue {
  width: 50%;
  background-color: deepskyblue;
  height: 400px;
  display: block;
  position: relative;
  float: left;
}

#boks-red {
  width: 50%;
  background-color: red;
  height: 400px;
  display: block;
  position: relative;
  float: left;
}

#boks-purple {
  width: 50%;
  background-color: purple;
  height: 400px;
  display: block;
  position: relative;
  float: left;
}

@media only screen and (max-width: 770px) {
  #boks-green {
    width: 100%;
    background-color: green;
    height: 400px;
    display: block;
    float: left;
  }
  #boks-blue {
    width: 100%;
    background-color: deepskyblue;
    height: 400px;
    display: block;
    position: relative;
    float: left;
  }
  #boks-red {
    width: 100%;
    background-color: red;
    height: 400px;
    display: block;
    position: relative;
    float: left;
  }
  #boks-purple {
    width: 100%;
    background-color: purple;
    height: 400px;
    display: block;
    position: relative;
    float: left;
  }
}

＆＃13;

<div id="wrapper">
  <div id="boks-green">
  </div>

  <div id="boks-blue">
  </div>

  <div id="boks-red">
  </div>

  <div id="boks-purple">
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果您考虑使用现在quite well supported的 DataTable Titles = new DataTable(); SqlConnection connection = new SqlConnection(AssessmentData.GetConnection()); connection.Open(); SqlCommand sqlGetTitles = new SqlCommand("[HRO_AAT].[dbo].[GetPositionLibrary]", connection); sqlGetTitles.CommandType = System.Data.CommandType.StoredProcedure; SqlDataAdapter sqlTitles = new SqlDataAdapter(sqlGetTitles); sqlTitles.Fill(Titles); connection.Close(); gvPositions.DataSource = Titles.DefaultView; ，则可以轻松完成此操作。

首先，您需要媒体查询，然后如果您的容器是flexbox容器，您可以使用子项上的flex属性来选择元素的显示位置。

所以我会用：

order

在媒体查询中。

您可以了解有关flexboxes here的更多信息，或者您可以通过非常互动的方式深入挖掘here。