# Swap layouts at md

Two blocks, one hidden on phones and one on tablets, with `hidden md:flex`.

`WDiv`: [Responsive design](https://anilcancakir.com/wind_kit/docs/core-concepts/responsive-design.md)

```dart
// Hidden on mobile, Flex on MD (768px) and up
WDiv(
  className: '''
    hidden md:flex w-64 h-24 bg-blue-500
    text-white items-center justify-center rounded
  ''',
  children: [Text("Desktop / Tablet (MD+)")],
),

// Flex on mobile, Hidden on MD and up
WDiv(
  className: '''
    flex md:hidden w-64 h-24 bg-red-500
    text-white items-center justify-center rounded
  ''',
  children: [Text("Mobile (Small)")],
)
```