如何在媒體查詢中將最后一個塊代替第一個塊

我有一個簡單網格的示例，其中當螢屏尺寸小于 767 像素時，所有塊都會拉伸以填充螢屏。
當達到這個大小（767 像素）時，第 2 節移動到最底部。我有這樣的東西：第 1 節，頁腳，第 2 節。是否有可能以某種方式將第 2 節放在最頂部？（第 2 節，第 1 節，頁腳）

* {
    box-sizing: border-box;
  }
  

.wrapper {
    max-width: 1200px; 
    width: 100%;
    padding: 0 0px;
    margin: 0 auto;
}

.leftcolumn {
    float: left;
    width: 65%;
}

.rightcolumn {
    float: left;
    width: 35%;
    padding-left: 20px;
}

.row:after {
    content: "";
    display: table;
    margin-top: 20px;
}

.footer {
    padding: 20px;
    text-align: center;
    background: rgba(221, 221, 221, 0.3);
    margin-top: 20px;
}

@media screen and (max-width: 767px) {
    .leftcolumn, .rightcolumn {
        width: 100%;
        padding: 0;
    }
}

    <div class="wrapper">
        <div class="row">
            <div class="leftcolumn">
                1 section
                <div class="footer">
                   footer
                </div>
            </div>
        
            <div class="rightcolumn">
              2 section
            </div>
        </div>
    </div>

這是我現在擁有的：

這是我想要得到的：

uj5u.com熱心網友回復：

我在您的代碼中做了這些更改：

改用. grid_ float然后為網格專案設定grid-column和。grid-row然后將這些更改為小于 768 像素的螢屏尺寸。

另請注意，我為此更改了您的 HTML：

* {
  box-sizing: border-box;
}

.wrapper {
  max-width: 1200px;
  width: 100%;
  padding: 0 0px;
  margin: 0 auto;
}

.row {
  display: grid;
  grid-template-columns: 65% 35%;
}

.rightcolumn {
  grid-column: 2 / 3;
  padding-left: 20px;
}

.row:after {
  content: "";
  display: table;
  margin-top: 20px;
}

.footer {
  grid-row: 2 / 3;
  padding: 20px;
  text-align: center;
  background: rgba(221, 221, 221, 0.3);
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  .row {
    grid-template-columns: 100%;
  }
  .rightcolumn {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    padding-left: 0;
  }
  .footer{
    grid-row: 3 / 4;
  }
}

<div class="wrapper">
  <div class="row">
    <div class="leftcolumn">
      1 section
    </div>
    <div class="footer">
      footer
    </div>
    <div class="rightcolumn">
      2 section
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

您可以簡單地通過使用 flexbox 并在您的html代碼中進行一些更改來做到這一點。

* {
  box-sizing: border-box;
}

.wrapper {
  max-width: 1200px;
  width: 100%;
  border: 2px solid blue;
  padding: 0 0px;
  margin: 0 auto;
}

.left {
  width: 65%;
}

.rightcolumn {
  width: 35%;
  padding-left: 20px;
}

.row {
  display: flex;
  justify-content: space-between;
}

.footer {
  padding: 20px;
  width: 100%;
  text-align: center;
  background: rgba(221, 221, 221, 0.3);
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  .row {
    flex-direction: column;
  }
  .left,
  .rightcolumn {
    width: 100%;
    padding: 0;
  }
  .left {
    order: 2;
  }
  .rightcolumn {
    order: 1;
  }
}

<div class="wrapper">
  <div class="row">
    <div class="left">
      <div class="leftcolumn">
        1 section
      </div>
      <div class="footer">
        footer
      </div>
    </div>
    <div class="rightcolumn">
      2 section
    </div>
  </div>
</div>

.footer div的寬度可以根據自己的喜好設定在767像素以上，我設定為100%；

標籤：html css

上一篇：在這種情況下我應該如何設定z-index效果很好？[復制]

下一篇：將滑鼠懸停在鏈接上時更改背景影像？