Question

我有一个页面可以在台式机上使用react-bootstrap呈现，如下所示：

 <Row>
   <Col xs={12} md={8} className="a">
   </Col>
   <Col xs={6} md={4} className="b">
   </Col>
   <Col xs={6} md={4} className="c">
   </Col>
 </Row>

在用户界面中，看起来像这样

| |_b_| | a |_c_| | | |

当屏幕尺寸小于786 px（例如在移动设备或平板电脑中）时，我正在尝试按以下命令进行订购，因此它将是： |_b_| | a | | | |___| | c |

我已经厌倦了使用xsPull或mdPull或flex-direction: column并在CSS中重新排序，但是这些都不起作用。我想念什么吗？

Answer 1

要考虑的一件事是逻辑阅读顺序，它可能更接近于移动视图。在更宽的视口上，用户可以依赖于视觉层次结构并选择要阅读的内容和顺序-在这里您要进行重新排序。因此，首先开始移动，并按逻辑顺序创建元素：

确定一个断点，您可以在其中简单地在flexbox模型下重新分配order属性。您可以通过多种方式来执行此操作，但是可以使用速记作为简单的类名来进行以下操作：

@media (min-width: 40em) {
    .b { order: 2; }
    .a { order: 1; }
    .c { order: 3; }
}

当然，您除了要做布局之外，还需要做更多的事情，但这可以实现所需的简单重新排序。

Answer 2

为了获得您想要的东西，请使用它。如果需要像建议的@denmch那样更改顺序，也可以使用order属性。

** HTML：**

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item {
  height: 200px;
  background: green;
  width: 200px;
  border: 1px solid blue;
}

Fiddle

调整屏幕大小时如何重新排列div的顺序？

2 个答案: