Организация или заказ компонентов V-Flex с использованием Vuetify

Question

Как показано на рисунке выше, у меня возникают проблемы с укладкой или упорядочением компонентов V-Flex так, как мне нужно в моей сетке. По сути, мне нужно, чтобы мой третий v-flex (v-flex 3) располагался справа, когда размер экрана меняется на md.

Я возился с этим несколько часов и застрял. Я надеюсь это имеет смысл. Спасибо.

Answer 1

Вот как вы можете достичь желаемых результатов:

<v-layout row wrap justify-center>

    <v-flex md6><v-btn block dark>1</v-btn></v-flex>
    <v-flex md6><v-btn block dark>2</v-btn></v-flex>
    <v-flex xs12 md6 order-md2><v-btn block dark>3</v-btn></v-flex>
    <v-flex xs10 md6 order-md1><v-btn block dark>4</v-btn></v-flex>

</v-layout>

Вы можете узнать больше об этом Здесь .

Вот Codepen , который делает это.

Добавляя justify-center, вы убедитесь, что когда ваш v-flex не получит всю строку, он все равно будет выглядеть красиво (в данном случае, в центре).Вы также можете контролировать порядок элементов сетки с помощью order-{screenBreakpoint}{order}, поэтому в этом случае я использовал order-md2 для 3rd v-flex и order-md1 для 4th v-flex.

Порядок на экране среднего размера:

Заказ в меньшем размере экрана: