html - 如何重新排列div

Question

<div class="row">
  <div class="pimage clr">
    <img src="./images/portfolio/1.jpg" alt="Avatar" class="image" style="width:100%">
    <div class="middle">
      <div class="text">Onet</div>
    </div>
  </div>
  <div class="pvideo">
    <img src="./images/portfolio/2.jpg" alt="Avatar" class="image" style="width:100%">
    <div class="middle">
      <div class="text">two</div>
    </div>
  </div>
  <div class="pimage">
    <img src="./images/portfolio/3.jpg" alt="Avatar" class="image" style="width:100%">
    <div class="middle">
      <div class="text">three</div>
    </div>
  </div>
</div>
</div>

在更大的显示器中我希望它以相同的顺序显示，但对于平板电脑我想同时显示一个和三个以及两个在它们下面。

Answer 1

我建议你使用 css flexbox

.item {
  order: <integer>; /* default is 0 */
}

理解这个概念很好，所以请检查下面的链接。 csstricks

w3school flexbox