从布尔玛末端包裹[关闭]答案

【问题标题】：wrap from end Bulma [closed]从布尔玛末端包裹[关闭]
【发布时间】：2018-09-28 07:50:37
【问题描述】：

我有两列使用 Bulma (0.7.1) 的结构如下：

<section class="section">
  <div class="columns">
    <div class="column">
        <!-- column 1 -->
    </div>
    <div class="column">
        <!-- column 2 -->
    </div>
  </div>
</section>

当用户使用平板电脑或手机访问我的网站时，我希望我的第二列首先换行，即覆盖第一列。

Bulma 中是否有一个内置类可以做到这一点？还是我必须编写自己的 CSS ？如果是这样，如何？

【问题讨论】：

标签： html css bulma

【解决方案1】：

好的，我用 CSS/Bulma 搞定了，您可以添加 custom-columns 并使用 column-reverse 更改列的顺序。

@import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css");

@media(max-width: 767px) {
  .custom-columns {
    flex-direction: column-reverse;
    display: flex;
  }
}

<div class="columns custom-columns">
  <div class="column box">
    1
  </div>
  <div class="column box">
    2
  </div>
</div>

【讨论】：

行得通！但是，我想知道为什么 flex-wrap: wrap-reverse; 没有？
我猜flex-wrap: wrap-reverse; 不能应用于列/行。这就是为什么 flex-flow 有两个选项，flex-wrap 和 flex-direction 具有不同的值和不同的使用方式。

【解决方案2】：

您可以使用.is-multiline 对您的专栏进行换行 (Bulma)

使用 CSS

display: flex;   
flex-wrap: wrap;

与布尔玛

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />
<div class='columns is-multiline'>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        <div class="card-image">
        colonne 
      </div>
      </div>
      <div class="card-content">
      </div>
    </div>
  </div>
  <div class='column is-4'>
    <div class="card">
      <div class="card-image">
        colonne 2
      </div>
      <div class="card-content">
      </div>
    </div>
  </div>
</div>

【讨论】：

嗨@LPK，非常感谢您的帮助！这不是我真正想要的，我想要的是改变我的列的包装顺序。默认情况下，使用 Bulma，第 1 列将在移动设备上获得第 1 列，第 2 列在第 2 列，而我想要第 2 列，然后是第 1 列。虽然我不确定我是否清楚，如果不是很抱歉。
@JulesCorb 哦，我的错，我想我没看到。你很清楚，我现在明白了！ :-)