Question

我正在以Bulma flexbox css framework为旋转 - 到目前为止它非常整洁！我发现的唯一绊脚石是，我似乎无法设置移动设备的显示顺序。

List<Integer> allValues;
try(Stream<String> lines=Files.lines(file.toPath())) {
    allValues=lines.flatMap(Pattern.compile(" *")::splitAsStream)
         .filter(s -> s.matches("[0-9]+"))
         .map(Integer::valueOf)
         .collect(Collectors.toList());
}

修改

这是我的css的样子：

<div class="columns">
    <div class="column foo">Foo</div>
    <div class="column bar">Bar</div>  // Would like this to be first on small deviecs
</div>

Answer 1

对于这个答案，我假设您希望BAR仅在移动屏幕上显示。对于较大的显示屏，您希望FOO显示在最左侧。

这样做的一种方法是利用flexbox这就是bulma所构建的。在较大的屏幕上，bulma为列提供了属性display:flex，可用于显示行和列中的内容。

但是在较小的屏幕上，显示属性会切换为block。在大多数情况下，当连续项目具有display:block时，它们将按顺序堆叠。

我们可以使用时髦的解决方法来利用它。首先在您的HTML中放置BAR。然后将一个类添加到columns并将其设置为如下样式： HTML：

<div class="columns reverse-row-order">
  <div class="column bar">Bar</div>
  <div class="column foo">Foo</div>
</div>

CSS：

.reverse-row-order{
 flex-direction:row-reverse;
}

如果您希望看到它有效，则jsFiddle为https://jsfiddle.net/99ydhod8/

Answer 2

假设您的HTMl类似于：

<div class="columns reverseMe">
<div class="column">First Content</div>
<div class="column">Second Content</div>
</div>

如果您想使用媒体查询来撤销订单，可以执行以下操作：

.reverseMe{
    @include until($tablet) {
        flex-direction: row-reverse;
        display: flex;
    }
}

Bulma：如何在移动设备上定义堆栈顺序

2 个答案: