试图反转div以响应设计

Question

我对响应性设计很陌生。

我有4个浮动左divs，但是我想要做的是反转divs，这样看起来会更有响应性。

因此，该页面当前显示

FirstSecondThirdFourth

我想要的是：

FourthThirdSecondFirst

小提琴

​

#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>

​