Vue und Flexbox - Probleme

Hallo,

hier der Code auf codepen: https://codepen.io/werdas34/pen/XQLZPq

Ich möchte auf meiner Startseite mehrere Events anzeigen. Ist das Fenster maximal sollen drei Events nebeneinander mittig auf der Webseite stehen. Die weiteren Events sollen sich unterhalb anordnen. Sprich sind es fünf Events dann sollen drei in der ersten Reihe stehen und die zwei darunter folgen. Das ganze soll auch responsive sein. Wird das Fenster kleiner dann sollen nur noch zwei in der ersten Reihe zwei in der zweiten Reihe und eins in der letzten Reihe stehen.

Nur verstehe ich nicht so ganz weshalb es bei mir nicht funtioniert(bin noch Anfänger).

Die Klasse wrapper ist der Flexbox Cointainer und die Events sind die Items. Laut mehreren Tutorials sollte dies funktionieren. Oder liegt es an Vue?

Ich kann auch die Reihenfolge der Items bestimmen(order: 1;). Wie mache ich das, damit ich mittels der Vue Instanz auf die order Elemente zugreifen kann?

Also in etwa so:

var allEvents = new Vue({
    el:".event",
    data:{
        events: [
        {
            image: "./assets/Website/VeranstaltungsIMG.png",
            alt:"VeranstaltungsIMG",
            page:"formular.html",
            title:"Titel",
            subtitle:"Subtitel",
            order:"3"        <---------
        },
        {...}]});

mfg werdas34

Vielen Dank Sempervivum. Das war sehr hilfreich.

Ich hätte noch zwei kleine weitere Fragen:

1) Ich benutze select Boxen und das Problem ist, das sie anfangs nicht beschriftet sind. Das Liegt an Vue, denn wenn man dies entfernt, dann funktioniert es.

Bsp: https://codepen.io/werdas34/pen/joNGyN

2) Wie man an meinen vorherigen Beispiel sehen kann verwende ich ein allEvents Array. Wenn ich auf das zweite Event klicke dann geht er intern zu allEvents[1]. Wie komme ich an den Index 1 ran? Bzw. allgemein wie komme ich bei meinem Fall an den Index?

mfg werdas34