html - 如何在不更改html代码的情况下更改元素的顺序？

Question

这些是 3 个 inline-block 和元素，这意味着它们将彼此相邻排列。

这是一个可以实时查看所有内容的 fiddle :https://jsfiddle.net/8mdm8eox/

.wrapper {
  background: #fff;
  width: 100%
}

.firstElement,
.secondElement,
.thirdElement {
  display: inline-block;
  width: calc(100%/3)
}

.firstElement {
  background: #000;
  color: #fff
}

.secondElement {
  background: grey
}

.thirdElement {
  background: #ddd
}

@media (max-width: 767px) {}

<div class="wrapper">
  <div class="firstElement">First Element</div>
  <div class="secondElement">Second Element</div>
  <div class="thirdElement">Third Element</div>
</div>

所以这就是我想要的，当屏幕宽度为 767px 或更小时我想要:

@media (max-width: 767px){}

前两个元素垂直排序，第三个元素与其他两个元素水平排序，这样它们就变成了这样:

   _______________    ________________
   |First Element|    |ٍ              |
   _______________    |              |  
                      |Third Element |
   ________________   |              |
   |Second Element|   |              |
   _________________  _______________

不用担心第三个元素，文本会被破坏，我只希望前两个元素看起来像那样而不改变 html。

Answer 1

有多种方法可以在不更改 HTML 的情况下重新排列元素。

CSS flexbox 提供了 order属性(property)。但是，flex 对您来说可能不是一个好的选择，因为您希望一个元素跨越两行。您可能遇到的问题在这里讨论:

• Make a div span two rows in a grid
• Is it possible for flex items to align tightly to the items above them?

然而，CSS 网格布局为您的问题提供了许多很好的解决方案。 order 属性在这里也可用，但不是必需的。

这是使用 grid-template-areas 的一种解决方案属性(property)。

.wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-areas: "first second third";
}

.firstElement {
  grid-area: first;
  background: #000;
  color: #fff
}

.secondElement {
  grid-area: second;
  background: grey
}

.thirdElement {
  grid-area: third;
  background: #ddd
}

@media (max-width: 767px) {
  .wrapper {
    grid-template-areas: "first third" 
                         "second third";
  }

<div class="wrapper">
  <div class="firstElement">First Element</div>
  <div class="secondElement">Second Element</div>
  <div class="thirdElement">Third Element</div>
</div>

jsFiddle demo

Browser support for CSS Grid.