reactjs 在带有React和Material UI的响应式设计中交换元素位置

4sup72z8 于 2023-01-17 发布在 React

关注(0)|答案(1)|浏览(106)

我有一个Sandbox的这个项目，我正在工作，虽然我很高兴得到JS部分几乎完成，响应式设计是驾驶我有点疯狂，我相信这是一个简单的解决方案与Flex，但我不能得到它。
目前桌面视图是正确的，看起来应该是这样的，移动的和平板电脑却不是。在移动，唯一的问题是图像需要直接在标签下面，但上面的行星内容。在平板电脑，图像是上面的两个，然后弯曲在一起的权利下的图像。我知道一个问题是我有一个框容器在FlexTest.js的标签和内容，因此，我不能使用Flex Order来定位那里，但如果没有那些在同一个容器中，我就有问题让它们在不同的视图中正确定位。
This是设计的本意，以防我的描述真的很糟糕。

reactjs

来源：https://stackoverflow.com/questions/74635448/swapping-element-position-in-responsive-design-w-react-material-ui

1条答案

按热度按时间

b4qexyjb1#

我想在tailwind-css中给予它的想法。
您需要切换flex-row和flex-col属性以使此功能在tailwind-css中工作。

移动的设备中的输出

大型设备中的输出

代码：

<div class="flex flex-col">
  <div class="bg-blue-400 text-center text-4xl">Header</div>
  <div class="flex-1 flex-col sm:flex sm:flex-row">
    <div class="flex items-center justify-center text-center">
      <img class="p-10" src="https://www.quicksprout.com/images/foggygoldengatebridge.jpg" alt="images" />
    </div>

    <div class="m-10 flex items-center justify-center border-4 border-red-400 text-3xl">Your Main content goes here</div>
  </div>
  <div class="bg-blue-400 text-center text-4xl">Footer</div>
</div>

赞(0）回复(0）举报 2023-01-17

我来回答

reactjs 在带有React和Material UI的响应式设计中交换元素位置

1条答案

移动的设备中的输出

大型设备中的输出

代码：

相关问题

热门标签

最新问答