在移动设备上重新排列元素（响应式布局）

这可能是一个非常基本的问题，但我对 flexbox 和响应式布局还很陌生。

我有一个在桌面上看起来像这样的页面

这是我用来获得此布局的代码

<div style="width: 100%">
        <div class="row justify-center">
            <h2>Link statistics</h2>
        </div>
      <div class="row justify-center items-center q-gutter-sm">
            <div class="col-4 items-center">
                    <q-list bordered separator>
                        <q-item clickable v-ripple>
                            <q-item-section>
                                <q-item-label><strong>Original URL:</strong>&nbsp;<a :href="orig_link">{{ orig_link }}</a></q-item-label>
                            </q-item-section>
                        </q-item>

                        <q-item clickable v-ripple>
                            <q-item-section>
                                <q-item-label><strong>Shortened URL:</strong>&nbsp;<a :href="shortened_link">{{ shortened_link }}</a></q-item-label>
                            </q-item-section>
                        </q-item>

                        <q-item clickable v-ripple>
                            <q-item-section>
                                <q-item-label><strong>Creation date:</strong> {{ format_date(creation_date) }}</q-item-label>
                            </q-item-section>
                        </q-item>

                        <q-item clickable v-ripple>
                            <q-item-section>
                                <q-item-label><strong>Total clicks:</strong> {{ total_clicks }}</q-item-label>
                                <q-item-label caption>Over {{ days_since_creation }} days</q-item-label>
                            </q-item-section>
                        </q-item>
                    </q-list>
                </div>
                <div class="col-6 items-center">
                  <div>
                    <bar-chart
                    :options="options"
                    :chart-data="datasets"
                    :styles="chartStyle">
                    </bar-chart>
                  </div>
                  <div class="text-center">
                    <q-btn
                    outlined
                    rounded
                    no-caps
                    v-for="(item, idx) in data_view_options"
                    :key="idx"
                    @click='current_data_view = idx'
                    :label=item
                    style="margin-left: 10px"
                    />
                  </div>
                </div>
        </div>
    </div>

问题是，这就是它在移动屏幕上的样子：

我希望我的布局具有一定的响应能力，并通过将左侧的列表和右侧的图表放在不同的行中来处理这种情况，如果它们不适合同一行（例如，使用较小的屏幕）。

我怎样才能做到这一点？