I have this Component "Banner" which is being mapped, it has a gridContainer and 2 columns ? children with class col, I want to revert the order (left and right) of the divs, so I'm trying this:
<template>
<section class="h-screen">
<div class="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
<div
class="grid grid-cols-1 gap-8 lg:gap-16 lg:grid-cols-2 gridContainer"
>
<div
class="relative h-64 overflow-hidden rounded-lg sm:h-80 lg:h-full col"
>
<slot name="img" />
</div>
<div class="lg:py-24 col">
<slot name="tag" />
<slot name="title" />
<slot name="subtitle" />
<a
class="inline-flex items-center pr-8 py-3 mt-8 text-accent rounded hover:bg-transparent focus:outline-none focus:ring-0"
:href="`${appDomain}`"
>
<slot name="link" />
<span v-motion-fade-visible-once :delay="100">
<svg
class="w-5 h-5 ml-3 text-pink"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M17 8l4 4m0 0l-4 4m4-4H3"
/>
</svg>
</span>
</a>
</div>
</div>
</div>
</section>
</template>
<script lang="ts">
import { defineComponent, inject } from 'vue'
export default defineComponent({
name: 'Banner',
setup() {
const appDomain = inject('appDomain')
return {
appDomain
}
}
})
</script>
<style>
.gridContainer {
grid-auto-flow: dense;
}
.gridContainer:nth-child(-n + 1) > .col:first-child {
grid-column: 1;
}
</style>
It's not working. I leave this photo, so you can clearly see the 2 divs and what I want to achieve:
