Question

我在项目中使用Bulma，我的列有问题。我有两列：

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

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

我的问题是：扭转此问题的最佳方法是什么？当屏幕为< 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

这对我有用?

<?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".BlankFragment">

<com.getbase.floatingactionbutton.FloatingActionButton
    android:id="@+id/newNoteActionButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_margin="3dp"
    android:elevation="10dp"
    app:fab_icon="@drawable/ic_baseline_add_24" />

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/notesRecyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"/> 
  </RelativeLayout>

在Bulma CSS中切换列

2 个答案: