在 Bulma CSS 中切换列答案

【问题标题】：Switch columns in Bulma CSS在 Bulma CSS 中切换列
【发布时间】：2018-04-21 08:38:58
【问题描述】：

我在一个项目中使用 Bulma，但我遇到了列问题。我有两列：

<div class="columns">
  <div class="column is-5">
    ...
  </div>
  <div class="column is-7">
    ...
  </div>
</div>

当屏幕足够宽时，一切看起来都正常，当它调整大小（768 像素及以下）时，屏幕左侧的列现在位于屏幕顶部，另一个在下面。

我的问题是：扭转这种情况的最佳方法是什么？当屏幕为< 769px（在移动设备上）时，我需要右侧的列位于另一列旁边的顶部。

【问题讨论】：

标签： css responsive bulma

【解决方案1】：

您可以使用flex-direction: column-reverse; 来反转容器的方向，如下所示：

@media (max-width: 768px) { 
   .columns{ flex-direction: column-reverse; }
   .column{ width: 100% //just to make sure it's filling all of the screen }
}

【讨论】：

【解决方案2】：

这对我有用?

   @media only screen and (max-width: 768px) {
        flex-direction: column-reverse;
        display: flex;
    }

【讨论】：