dart: responsive Flutter web design problems

I am currently building a responsive web design in flutter based on a tutorial I have found.

Essentially it has (or I want it to have) a responsive navigation bar and body, but a static footer.

The problem I have is with the Body section: the navigation bar and the footer are fine.

The body changes between a row and a column when it is resized or viewed on a different device. There is no problem until you start stacking those Rows and Columns vertically within another Column.

These are examples of how it works correctly, however, only with a single row / column: in desktop, tablet and mobile views:

DESK VIEW

TABLET VIEW

MOBILE VIEW

So, this is the code …

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveBuilder(
      builder: (context, sizingInformation) => Scaffold(
        drawer: sizingInformation.isMobile ? NavDrawer() : null,
        backgroundColor: Colors.white,
        body: Column(
          children: (
            NavBar(),
            Expanded(
              child: HomeContentTest(),
            ),
            Footer(),
          ),
        ),
      ),
    );
  }
}
class HomeContentTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveBuilder(
      builder: (context, sizingInformation) {
        return sizingInformation.isDesktop
            ? Row(
                children: (
                  HomeDetailsTest(),
                  HomeMediaTest(),
                ),
              )
            : Column(
                children: (
                  HomeDetailsTest(),
                  HomeMediaTest(),
                ),
              );
      },
    );
  }
}
class HomeDetailsTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Expanded(
          child: Container(
        color: Colors.red,
        child: Center(
          child: Text('Home Details'),
        ),
      ),
    );
  }
}
class HomeMediaTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Container(
        color: Colors.yellow,
        child: Center(
          child: Text('Home Media'),
        ),
      ),
    );
  }
}

The problems start when I try to stack my columns / rows inside the HomeContentTest class, like this:

class HomeContentTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveBuilder(
      builder: (context, sizingInformation) {
        return sizingInformation.isDesktop
            ? Column(
                children: (
                  Row(
                    children: (
                      HomeDetailsTest(),
                      HomeMediaTest(),
                    ),
                  ),
                  Row(
                    children: (
                      HomeDetailsTest(),
                      HomeMediaTest(),
                    ),
                  ),
                ),
              )
            : Column(
                children: (
                  Column(
                    children: (
                      HomeDetailsTest(),
                      HomeMediaTest(),
                    ),
                  ),
                  Column(
                    children: (
                      HomeDetailsTest(),
                      HomeMediaTest(),
                    ),
                  ),
                ),
              );
      },
    );
  }
}

Basically they do not stack as expected and the page no longer shows any items. I guess this is because something is trying to occupy an infinite amount of space, but I can't see how I haven't encountered a problem up to this point.

Any help would be highly appreciated!