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

这可能是一个非常基本的问题，但我对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>

链接统计
原始URL:
缩短的URL:
创建日期：{{format\u date（创建日期）}
点击总数：{{Total_clicks}
在{天}天内

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

我希望我的布局能有一定的响应性，如果列表不在同一行中（例如，屏幕较小），我可以将列表放在左边，图表放在右边，将它们分别放在不同的行中来处理这种情况

---

我如何才能做到这一点？

为此，您需要响应网格。在您的情况下，它设置为

col-4

和

col-6

，将应用从最小屏幕到最大屏幕的那些列。请注意，总共有12列，您正在将10列与中心对齐

就您的情况而言，您需要类

col-12 col-md-4

，

col-12 col-md-6

。然后它将从小屏幕上的12列开始，在平板电脑屏幕上跳转到col-4/col-6

（如果不够，将其设置为

col-12 col-lg-4

，

col-12 col-lg-6

）