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

【问题标题】：Making elements rearrange on mobile (responsive layout)在移动设备上重新排列元素（响应式布局）
【发布时间】：2020-11-04 13:22:24
【问题描述】：

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

问题是，这就是它在手机屏幕上的样子：

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

我怎样才能做到这一点？

【问题讨论】：

标签： css vue.js responsive-design quasar

【解决方案1】：

为此，您需要响应式网格columns。在您的情况下，它设置为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）

【讨论】：