How to force a responsive element to adapt and use the small screen layout if the container is small?

[jean-francois-labbe]

I'm trying to find a way to reuse responsive html elements.
Let say I have a responsive html element that displays 2 columns on big screens and 2 rows on small ones.

<div class="max-w-xl border flex flex-wrap">
  <div class="w-full sm:w-1/2 bg-blue-200 text-center">super intersting content here</div>
  <div class="w-full sm:w-1/2 bg-green-200 text-center">Tailwindcss is Awesome</div>
</div>

Now I want to reuse this element to display it in a multi column layout
since the columns are small I'd like the mobile layout to be used.

<div class="grid grid-cols-3 gap-4 mb-8 max-w-xl">
  <div class="max-w-xl border flex flex-wrap">
    <div class="w-full sm:w-1/2 bg-blue-200 text-center">super intersting content here</div>
    <div class="w-full sm:w-1/2 bg-green-200 text-center">Tailwindcss is Awesome</div>
  </div>
  <div class="max-w-xl border flex flex-wrap">
    <div class="w-full sm:w-1/2 bg-blue-200 text-center">super intersting content here</div>
    <div class="w-full sm:w-1/2 bg-green-200 text-center">Tailwindcss is Awesome</div>
  </div>
  <div class="max-w-xl border flex flex-wrap">
    <div class="w-full sm:w-1/2 bg-blue-200 text-center">super intersting content here</div>
    <div class="w-full sm:w-1/2 bg-green-200 text-center">Tailwindcss is Awesome</div>
  </div>
</div>

Is there a way to set a referring context? or override the screen size inside a div?

Here is a demo https://jsfiddle.net/JefffRennes/2txmo4ae/20/