试图为响应式设计反转div

Question

我是响应式设计的新手。

我有4个左浮动div。但我想做的是反转div s，这样看起来会更敏感。

因此页面当前显示

FirstSecondThirdFourth

我想要的是：

FourthThirdSecondFirst

Fiddle

#block-1,
#block-2,
#block-3 {
  float: left;
}

<div id="example">
  <div id="block-1">First</div>
  <div id="block-2">Second</div>
  <div id="block-3">Third</div>
  <div id="block-4">Fourth</div>

</div>

Answer 1

您可以使用flex-direction: row-reverse和justify-content:flex-end（根据您的意愿，这是可选的）

#example {
  display: flex;
  flex-direction: row-reverse;
  justify-content:flex-end  
}

<div id="example">
  <div id="block-1">First</div>
  <div id="block-2">Second</div>
  <div id="block-3">Third</div>
  <div id="block-4">Fourth</div>
</div>