Html 如何在 Tailwind CSS 中创建响应式网格布局

我已经为桌面创建了网格布局，但对于移动设备，它是不同的. 下面是桌面版的照片

我使用以下代码创建了此布局:

 <div class="grid grid-flow-col grid-rows-2 gap-1 ml-auto justify-center mt-2.5">
            <img src="{{view url='images/icons/ic_mastercard.svg'}}" width="44" height="30" alt="mastercard" loading="lazy">
            <div class="w-[44px] h-[30px] hidden md:block"></div>
            <img src="{{view url='images/icons/ic_maestro-white-bg.svg'}}" width="44" height="30" alt="mastercard" loading="lazy">
            <img src="{{view url='images/icons/ic_gb.svg'}}" width="44" height="30" alt="GB" loading="lazy">
            <img src="{{view url='images/icons/ic_visa.svg'}}" width="44" height="30" alt="visa" loading="lazy">
            <img src="{{view url='images/icons/ic_bancontact-white-bg.svg'}}" width="44" height="30" alt="Bancontact" loading="lazy">
            <img src="{{view url='images/icons/ic_american-ex.svg'}}" width="44" height="30" alt="american exprerss" loading="lazy">
            <img src="{{view url='images/icons/ic_eps-white-bg.svg'}}" width="44" height="30" alt="EPS" loading="lazy">
            <img src="{{view url='images/icons/ic_paypal.svg'}}" width="44" height="30" alt="paypal" loading="lazy">
            <img src="{{view url='images/icons/ic_multibanco-white-bg.svg'}}" width="44" height="30" alt="Multibanco" loading="lazy">
            <img src="{{view url='images/icons/ic_klarna-pink-bg.svg'}}" width="44" height="30" alt="klarna" loading="lazy">
            <img src="{{view url='images/icons/ic_giropay-white-bg.svg'}}" width="44" height="30" alt="Giropay" loading="lazy">
            <img src="{{view url='images/icons/ic_gpay-white-bg.svg'}}" width="44" height="30" alt="google pay" loading="lazy">
            <img src="{{view url='images/icons/ic_alipay-white-bg.svg'}}" width="44" height="30" alt="Alipay" loading="lazy">
            <img src="{{view url='images/icons/ic_applepay-white-bg.svg'}}" width="44" height="30" alt="apple pay" loading="lazy">
            <img src="{{view url='images/icons/sofort.svg'}}" width="44" height="30" alt="Sofort" loading="lazy">
    </div>

现在，问题是，当我切换到手机时，布局保持不变，但相反，手机上的布局应该如下图所示

如何使用网格创建如此照片所示的移动布局？