如何根据视口宽度使用 Tailwind CSS 更改部分 class 的布局？

Question

我正在努力执行以下想法，很高兴得到支持：

我创建了这篇文章预览部分，它在小屏幕（移动）设备上看起来很棒：

<section class="w-full md:w-2/3 flex flex-col items-center px-3">
    <article class="w-full flex flex-col shadow my-4">
    <div class="bg-white flex flex-col justify-start p-6">
            <div class="max-w"><a
                    href="#>"
                    class="text-blue-700 hover:text-blue-500 text-sm font-bold uppercase pb-4">#Tag&nbsp;#Tagg&nbsp;#TAGGG</a>
            </div>
            <a href="#"
                class="text-3xl font-bold hover:text-gray-700 pb-4">Article title</a>
            <p href="#" class="text-sm pb-3">By <a href="#" class="font-semibold hover:text-gray-800">author</a>, published at 12.03.2021
            </p>
        <div class="aspect-w-16 aspect-h-9">
        <a href="#">
            <img src="https://images.unsplash.com/photo-1614730321146-b6fa6a46bcb4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDIzfHxlYXJ0aHxlbnwwfHx8fDE2Mjc1NTc2ODI&ixlib=rb-1.2.1&q=80&w=2000">
        </a>
        </div>
            <a href="#"
                class="pb-6 prose max-w-none">Here comes a teaser or an excerpt of the article text...</a>
            <div><a href="#"
                class="uppercase hover:font-bold text-gray-700 hover:text-black"><mark>Read more…&nbsp;<i
                    class="fas icon-arrow-right"></i></mark></a></div>
        </div>
    </article>
</section>

现在我想将大屏幕 (md: = @media (min-width: 768px) &) 上的布局更改为此：

遗憾的是我的知识太有限，无法实现我的想法。需要什么 added/changed 才能实现？

Link to the Playground

Answer 1

实现此目的的最简单方法是拥有 2 张图像并根据屏幕尺寸隐藏其中的 1 张。

所以在大屏幕上你会隐藏左对齐的图像类:

hidden md:block

md:block 覆盖 hidden.

内联图像在大屏幕上隐藏：

md:hidden

I made you a playground (also cleaned up unneccesary classes and tags a bit)

我将图像与 grid 和 grid-cols 左对齐。肯定还有其他方法可以做到这一点。

如何根据视口宽度使用 Tailwind CSS 更改部分 class 的布局？

How to change the layout of a section class with Tailwind CSS based on viewport width?

css

flexbox

responsive-design

tailwind-css