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

Question

这些是3 inline-block和元素,这意味着它们将彼此相邻排序.

这是一个观看现场活动的小提琴: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属性.但是,flex可能不是一个很好的选择,因为您希望一个元素跨越两行.您可能会遇到的问题在这里讨论:

• 使div在网格中跨越两行
• 柔性物品是否可以与其上方的物品紧密对齐？

但是,CSS网格布局为您的问题提供了许多好的解决方案.该order物业也可在这里使用,但没有必要.

这是使用该grid-template-areas属性的一个解决方案.

.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演示

浏览器支持CSS Grid.

Answer 2

您需要flex-wrap在儿童.wrapper身上使用order。

.wrapper {
  max-width: calc(100%/2);  //Just to keep your original width intact
  display: flex;
  flex-wrap:wrap;
}

.firstElement, .secondElement, .thirdElement{
    min-width:50%; //This will force your width to 50% of your wrapper class
}
.firstElement{ order: 1;}
.secondElement{ order: 2;}
.thirdElement{ order: 3;}

.wrapper {
  max-width: calc(100%/2);  //Just to keep your original width intact
  display: flex;
  flex-wrap:wrap;
}

.firstElement, .secondElement, .thirdElement{
    min-width:50%; //This will force your width to 50% of your wrapper class
}
.firstElement{ order: 1;}
.secondElement{ order: 2;}
.thirdElement{ order: 3;}

.wrapper {
  background: #fff;
  max-width: calc(100%/2);
  display: flex;
  flex-wrap: wrap;
}

.firstElement,
.secondElement,
.thirdElement {
  display: inline-block;
  min-width: 50%
}

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

.secondElement {
  background: grey;
  order: 3;
}

.thirdElement {
  background: #ddd;
  order: 2;
}

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