如何使div在移动屏幕上堆叠，在桌面屏幕上内联？

Question

我很难使用Tailwind在大尺寸上显示内联，在小尺寸上显示块。

下面是我的代码：

<div class="block md:flex md:justify-between md:text-left text-center">

    <div class="order-2 md:order-1">Div 1</div>
    <div class="order-1 md:order-2">Div 2</div>

</div>

在大屏幕上，它应该如下所示：

Div 1                                                                     Div 2

在一个小屏幕上：

                                       Div 2
                                       Div 1

Answer 1

媒体查询

可以根据特定条件使用媒体查询更改样式：

<div class="container">
  <div>ONE</div>
  <div>TWO</div>
</div>

.container {
  /* Mobile by default as Roy pointed out */
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  /* For desktops */
  .container {
    flex-direction: row;
  }
}

这是一个供你玩的JSFiddle。

如果您真的想检查它是否是移动设备，那么在您正在使用的框架中可能有一个库。

或者，您也可以使用一些JavaScript来检查它，如一些示例所解释的这里。

但设备类型不应实际影响如何显示项目的决定。您应该只考虑屏幕大小和比率，从而使用媒体查询。

Answer 2

您的代码似乎是正确的，但是如果默认的顺风断点不适合您的需要，则可以定义您自己的自定义断点。

https://tailwindcss.com/docs/screens