在 Bulma 中切换列 CSS

Question

我在一个项目中使用 Bulma，但我对列有疑问。我有两列：

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

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

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

Answer 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 }
}

Answer 2

这对我有用

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

在 Bulma 中切换列 CSS

Switch columns in Bulma CSS

css

responsive

bulma