Изменение порядка элементов на мобильных устройствах (адаптивный макет)

Это потенциально очень простой вопрос, но я новичок в 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>

Проблема в том, как это выглядит на экране мобильного телефона:

Я хотел бы, чтобы мой макет был несколько отзывчивым и обрабатывал эту ситуацию, помещая список слева и диаграмму справа в отдельные строки, если они оба не помещаются в одну строку (например, с меньшими экранами).

Как я могу это сделать?