尝试反转 div 以进行响应式设计

Question

我是响应式设计的新手。

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

所以页面当前显示

第一第二第三第四

我想要的是：

第四第三第二第一

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

尝试反转 div 以进行响应式设计

Attempting to reverse divs for responsive design

html

css

css-float