如何基于视口宽度使用Tailwind CSS修改区块类的布局？

具体修改方案 #

你只需要对原有代码做以下几处调整即可实现目标效果：

1. 修改article标签的类，增加大屏下的横向布局配置，新增md:flex-row在宽度≥768px时将卡片改为横向布局，overflow-hidden避免图片超出容器边界
2. 修改文字内容容器（白色背景的内层div）的类，新增md:w-1/2让文字区域在大屏下占卡片宽度的50%
3. 修改图片容器的类，新增md:w-1/2让图片容器在大屏下占50%宽度，md:order-first把原本在文字之后的图片调整到左侧显示
4. 给img标签增加h-full w-full object-cover类，保证图片填满容器，无拉伸变形

修改后完整代码 #

<section class="w-full md:w-2/3 flex flex-col items-center px-3">
    <article class="w-full flex flex-col md:flex-row shadow my-4 overflow-hidden">
        <div class="bg-white flex flex-col justify-start p-6 md:w-1/2">
            <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 class="text-sm pb-3">By <a href="#" class="font-semibold hover:text-gray-800">author</a>, published at 12.03.2021
            </p>
            <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>
        <div class="aspect-w-16 aspect-h-9 md:w-1/2 md:order-first">
            <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" class="h-full w-full object-cover">
            </a>
        </div>
    </article>
</section>

内容的提问来源于stack exchange，提问作者Peleke